前端节流（throttle）和防抖（debounce）的区别和用法，并封装成vue指令

旧城等待， 2022-12-30 01:26 217阅读 0赞

### 文章目录 ###

*  一、节流（throttle）
 *  二、防抖（debounce）

# 一、节流（throttle） #

在一定时间内（例n秒内），不管方法被调动多少次，只会在n秒后再调动第二次方法。也就是**每隔n秒执行一次**。

应用例子：滚动页面垂直滚动条，判断是否滚动到页面底部。

var canFlag = true;
    window.onresize = function(){ 
        console.log('resize')
        if (!canFlag) return;
        canFlag = false;
        setTimeout(function(){ 
            canFlag = true;
            console.log('节流');
        }, 100)
    }

封装成通用方法：

封装成vue自定义指令：

/*** * 节流 * 带参数： <el-button v-debounceing="[reset,[params1,params2,...],`click`,300]"></el-button> * 不带参数： <el-button v-debounceing="[reset,[],`click`,300]"></el-button> * 也可简写成：<el-button v-debounceing="[reset]"></el-button> */
    Vue.directive('throttleing', { 
        bind: function (el, binding) { 
            let [fn, param = [], event = "click", time = 300] = binding.value;
            let canFlag = true;
            el.addEventListener(event, () => { 
                if (!canFlag) return;
                canFlag = false;
                setTimeout(function(){ 
                    canFlag = true;
                    fn(...param);
                }, time);
            })
        }
    })

# 二、防抖（debounce） #

在一定时间内（例n秒内），不管方法被调动多少次，只执行一次方法。也就是**只执行最后一次**。

应用例子：判断用户的输入情况，只在用户停止输入一段时间后再进行判断。

var timer;
    window.onresize = function(){ 
        console.log('resize')
        clearTimeout(timer)
        timer = setTimeout(function(){ 
            console.log('防抖')
        }, 100)
    }

封装成通用方法：

封装成vue自定义指令：

/*** * 防抖 * 调用方法和节流相同 */
    Vue.directive('debounceing', { 
        bind: function (el, binding) { 
            let [fn, param = [], event = "click", time = 300] = binding.value;
            let timer;
            el.addEventListener(event, () => { 
                clearTimeout(timer)
                timer = setTimeout(function(){ 
                    fn(...param);
                }, time)
            })
        }
    })