节流和防抖的手写及应用场景

节流(throttle)

什么是节流

n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

形象地说，就是事件进入冷却时间了，要等待冷却时间到了之后才能再次触发。

手写节流

    function throttle(fn, time) {
        let timer = null
        return (...args) => {
            if (timer) {
                return
            }
            fn.call(undefined, ...args)
            timer = setTimeout(() => {
                timer = null
            }, time)
        }
    }

	// 测试demo
    const fn = function () {
        console.log(111)
    }

    const x = throttle(fn, 5000)

使用场景

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能

防抖(debounce)

什么是防抖

n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时

形象地说，每触发一次事件就相当于打断上一次触发，重新开始计时，直到n秒成功触发。

手写防抖

    function debounce(fn, time) {
        let timer = null
        return (...args) => {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.call(undefined, ...args)
            }, time)
        }
    }
	
	// 测试demo
	const fn = function () {
        console.log(111)
    }

    const x = throttle(fn, 2000)

使用场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。