JS中的节流与防抖函数

8,272 阅读2分钟

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

例子

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);
});

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

节流函数

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

  1. 定时器来实现

    当一个定时器执行,就会生成一个定时器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. 防抖函数是在触发事件的单位时间后执行一次函数,在单位时间内多次触发不执行函数,重新计时
  3. 节流函数是单位时间内只执行一次函数,多次触发也只有一次有效

适用场景

  1. 防抖
    1. 搜索输入框搜索内容,用户在不断的输入的时候,用防抖来节约请求资源
    2. 不断的触发window的resize事件,不断的改变窗口大小,利用防抖函数来只执行一次
  2. 节流
    1. 鼠标不断的点击,用节流来限制只在规定的单位时间内执行一次函数
    2. 滚轮事件, 不断的往下滚轮,比如滚动到底部加载数据