1. 防抖

    定义: 在定义的时间内只执行一次, 且延迟执行
    例如: 定义时间2s, 在10s内连续一直点击, 则在第12秒执行函数
    拓展: 首次正常执行, 后续延迟执行
    下例: 点击事件, 首次生效, 后续点击在1秒内最后一次点击生效

    1. /*
    2. 代码解释:
    3. 注册 debounce 函数, 定义 t 变量;
    4. 首次点击时, 赋值定时器的返回值t;
    5. 2s内再次点击时, 清除上一次定时器的执行函数, 并且再次注册新的定时器
    6. 后续2s内点击依次清除前一次的执行, 只执行最后一次点击的函数, 从而实现延迟2s的效果
    7. */
    8. var debounce = function(func, wait) {
    9.   var t;
    10.   return function() {
    11.     var nfunc = () => func(...arguments);
    12.     t ? clearTimeout(t) : nfunc(); // 拓展: 首次执行 nfunc();
    13.     t = setTimeout(t ? nfunc : () => 0, wait);
    14.   }
    15. }
    16. var click1 = debounce(function(e, v) {
    17.   console.log('values: ', e, v)
    18. }, 1000)
    1. 节流

    定义: 定义一个时间, 连续触发事件只能在定义的时间内执行一次
    例如: 定义时间2s, 在10s内连续一直点击, 则实际触发5次

    1. /*
    2. 代码解释:
    3. 注册 throttle 函数, 定义 t 变量;
    4. 首次点击执行定时器, 进入计时, 2s后执行func函数;
    5. 后续2s内的多次点击均被if条件判断为false, 取消函数执行;
    6. 2s后执行func函数, t设置null, 再次点击进入新的定时, 从而实现2s内多次触发执行一次的效果
    7. */
    8. const throttle = function(func, wait){
    9.   var t;
    10.   return function(){
    11.     if(t) return;
    12.     t = setTimeout(()=>{
    13.       func(...arguments);
    14.       t = null;
    15.     }, wait)
    16.   }
    17. }
    18. var click2 = throttle(function(e, v) {
    19.   console.log('values: ', e, v)
    20. }, 2000)