JS中的节流与防抖函数

导读

节流函数和防抖函数在日常的开发中还是有很多地方用到，两个函数的目的都是为了控制函数被调用的频率，今天我们就来说一说着两个函数。

例子

input触发键盘输入事件，将输入内容发送到后台：

// 定义一个请求函数
function request(val) {
    console.log("request: " + val);
}

let inputEl = document.getElementById("input");

inputEl.addEventListener("keyup", function (e) {
    request(e.target.value);
});

可以看到，我们每次按下键盘输入的时候，都会去请求，这样很浪费资源，一般应用中都是等待用户输入完整的字符，再去请求后台，所以我们用防抖函数来优化这一个。

防抖函数

事件被触发时，在n秒后执行函数，在n秒内多次触发事件，则重新开始计时

利用定时器来实现，在n秒内多次触发，则先清除定时器，从新计时

// 定义一个请求函数
function request(val) {
    console.log("request: " + val);
}

// 定义一个防抖函数
function debounce(fn, delay) {
    let timeout;
    return function(){
      clearTimeout(timeout)
      timeout = setTimeout(()=>{
        fn.apply(this, arguments)
      },delay)
    }
}

let inputEl = document.getElementById("input");

let debounceInput = debounce(request, 500)

inputEl.addEventListener("keyup", function (e) {
    debounceInput(e.target.value);
});

只有当输入完成后才会触发函数，防止在不停是输入时调用函数，减少资源的浪费。

节流函数

在规定的单位时间段内，函数只能执行一次，在单位时间内多少触发，则只有一次有效

定时器来实现

当一个定时器执行，就会生成一个定时器id，当这个id存在就说明在单位时间内函数只执行了一次。

// 定义一个请求函数
function request(val) {
    console.log("request: " + val);
}

// 定义一个节流函数
function throttle(fn, delay) {
    let timer;
    return function(){
      if(!timer) {
        fn.apply(this, arguments)
        timer = setTimeout(()=>{
          clearTimeout(timer)
          timer = null
        },delay)
      }
    }
}

let inputEl = document.getElementById("input");

let throttleInput = throttle(request, 500)

inputEl.addEventListener("keyup", function (e) {
    throttleInput(e.target.value);
});

可以看到，当我们在输入框中不断输入，请求函数在我们规定的单位时间执行一次函数

总结

• 防抖函数和节流函数都是用于控制函数调用频率，但是两者实现原理不同

• 防抖函数是在触发事件的单位时间后执行一次函数，在单位时间内多次触发不执行函数，重新计时

• 节流函数是单位时间内只执行一次函数，多次触发也只有一次有效

适用场景

防抖

1. 搜索输入框搜索内容，用户在不断的输入的时候，用防抖来节约请求资源

2. 不断的触发window的resize事件，不断的改变窗口大小，利用防抖函数来只执行一次

节流

1. 鼠标不断的点击，用节流来限制只在规定的单位时间内执行一次函数

2. 滚轮事件, 不断的往下滚轮，比如滚动到底部加载数据