函数节流和函数防抖

函数节流和函数防抖是什么？解决什么问题？

函数节流与函数防抖都是通过延迟执行，减少调用次数，来优化频繁调用函数时的性能的解决方案。

原理

使用 setTimeout 来存放待执行的函数，利用 clearTimeout 在合适的时机来清除待执行的函数。

二者有什么区别？

两者触发时机应该包括立即执行和非立即执行，这边用非立即执行理解以同一函数多次调用，函数再次触发时机来对两者进行区分

节流：就是限制一个函数在一定时间内只能执行一次。

使用时机

• 改变浏览器窗口尺寸，可以使用函数节流，避免函数不断执行；
• 滚动条scroll事件，通过函数节流，避免函数不断执行。

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 通俗一点：在一段固定的时间内，只能触发一次函数，在多次触发事件时，只执行最后一次。

使用时机： 搜索功能，在用户输入结束以后才开始发送搜索请求，可以使用函数防抖来实现；

总结：节流是为了限制函数的执行次数，而防抖是为了限制函数的执行时机

怎么做？

节流：

let throttleSetTimeout = null    
let throttleCount = 0    
let throttleSuccessTime = 0    
document.getElementsByClassName('main')[0].onclick = function () {        
  if (throttleSetTimeout) {            
    throttleCount++            
    console.log('按钮被点击的次数', throttleCount);            
    return        
  }        
throttleSetTimeout = setTimeout(() => {            
    throttleSuccessTime++            
    console.log(`成功请求次数：`, throttleSuccessTime)            
    clearTimeout(throttleSetTimeout)            
    throttleSetTimeout = null        
  }, 1000)    
}

防抖：

let debounceSetTimeout = null    
let debounceSuccessTime = 0    
let debounceClickTime = 0    
document.getElementsByClassName('main')[1].onclick = function () {        
  if (debounceSetTimeout) {            
    debounceClickTime++            
    console.log('按钮被点击的次数', debounceClickTime);            
    clearTimeout(debounceSetTimeout)        
  }        //如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。
debounceSetTimeout = setTimeout(() => {            
    debounceSuccessTime++            
    console.log(`成功请求次数：`,debounceSuccessTime ) 
    //若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。     
  }, 1000)    //延迟运行需要执行的代码
}