节流与防抖

防抖：将多次操作变为一次

 

 //防抖

let debounce = function(callback, time = 200) {

     //设置句柄

     let timebar = null

     return function(...args) {

        // 清除原来的，重新计时

         clearTimeout(timebar);

        timebar = setTimeout(function() {

           callback(...args);

        }, time)

     }

 }

 

节流：一定时间内只调用一次

let throttle = function(callback, time = 1000) {

    let lock = false;

    return function(...args) {

        // 如果打开了不能执行

        if (lock) {

            return;

        }

        // 执行时打开

        lock = true;

        // 执行函数

        callback(...args);

        // 解锁

        setTimeout(function() {

            lock = false;

        }, time)

    }

}

 

防抖在连续的事件，只需触发一次回调的场景有：

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

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能
• 1.提交表单
• 2.高频监听事件