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

一、节流（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)
}

封装成通用方法：

function ThrottleFun(callback, time){
    let canFlag = true;
    return function(){
        if (!canFlag) return;
        canFlag = false;
        setTimeout(function(){
            canFlag = true;
            callback();
        }, time)
    }
}
// 使用
let todo = function(){
    console.log('节流');
}
let throttle = ThrottleFun(todo, 100);
window.onresize = function(){
    console.log('resize');
    throttle();
}

封装成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)
}

封装成通用方法：

function DebounceFun(callback, time){
    var timer;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            callback();
        }, time);
    }
}
// 使用
let todo = function(){
    console.log('防抖')
}
let debounce = DebounceFun(todo, 100);
window.onresize = function(){
    console.log('resize');
    debounce();
}

封装成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)
        })
    }
})