js防抖和节流

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

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

function request(val){
      console.log('request:' + val)
    }
    let inputEl = document.getElementById('input')
    inputEl.addEventListener("keyup",(e)=>{
      request(e.target.value)
    })

 

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

防抖函数

• 事件被触发时，在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',(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 debounceInput = throttle(request,500)
    inputEl.addEventListener('keyup',(e)=>{
      debounceInput(e.target.value)
    })

 

总结：

• 防抖函数和节流函数都是用于控制函数调用频率，但是两者实现原理不同。
• 防抖函数是在触发事件的单位时间后执行一次函数，在单位时间内多次触发不执行函数，重新计时。
• 节流函数是在单位时间内只执行一次函数，多次触发也只有一次有效。