函数防抖 函数节流

函数防抖：在 n 秒内重新触发，会重新开始计算时间

实现：通过 setTimeout 和 clearTimeout 实现

应用场景：按钮点击事件/input事件，防止用户多次重复提交

//简易写法
let timeout;
$(".xx").click(function() {
    clearTimeout(timeout)   
    timeout = setTimeout(() => {
        //在此处写调用的方法，可以实现仅最后一次操作生效
  }, 1000)
    
})


function debounce (fn, time) {
  let timer = null
  // 闭包
  return () => {
    // 每次都会重新开始计算时间
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, time)
  }
}

function sayDebounce() {
  console.log('我是防抖，每次触发我都会重新计算一次时间')
}

btn.onclick = debounce(sayDebounce, 1000);
//或$("#btn").on('click', debounce(confirmExchange, 1000))

函数节流：在 n 秒中只执行一次

实现：通过 setTimeout 执行

应用场景：

• 鼠标/触摸屏的mouseover/touchmove事件
• 页面窗口的resize事件
• 滚动条的scroll事件

// 初步实现
const throttle = function (fn, time) {
  let canRun = true
  // 闭包
  return () => {
    if (canRun) {
      canRun = false
      setTimeout(() => {
        canRun = true
        fn()
      }, time)
    }
  }
}

function sayThrottle() {
  console.log('我是节流，我在固定的时间内执行一次')
}
window.onscroll = throttle(sayThrottle, 1000)

区别：一定时间内任务执行的次数。比如一个事件每1s触发很多次，平均每10ms触发一次。节流，假设时间间隔为100ms，在100ms内只能执行一次事件回调函数，1s内函数的调用次数为：1000 /100 = 10次防抖，假设时间间隔为100ms，时间触发的间隔必须要大于100ms，才调用回调函数。因为触发间隔=10ms < 100ms，1s内函数的调用次数为：0;

原文地址