js节流和防抖

2年前面试腾讯前端就遇到这个题目，谈谈js节流和防抖，现在前端面试中问到的概率也很大，现在去梳理一下，js节流和防抖主要是解决用户重复提交数据和请求数据做的拦截措施，那什么是防抖什么是节流？

函数防抖(debounce)：触发高频事件后n秒内函数只执行一次，n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

有图有真相：

无防抖无节流

防抖函数 （只执行最后一次）

节流函数 （1s 执行一次）

【防抖原理】

第一次调用函数时候，创建一个定时器，指定时间间隔之后运行代码；如果代码还没运行时，又触发了该函数，则清除旧的定时器，重新创建新的定时器；如果超过延时执行的时间，代码执行了，此时已经是第二次触发。

【节流原理】

第一次执行函数的时候，记录函数执行的时间，当下一次执行的时候，比较时间是否还在间隔时间内，如果是则不执行，否则继续执行。

应用场景

防抖：搜索框联想、Dom拖拽、计算鼠标移动距离、点击提交等。

节流：scroll滚动事件、提交表单验证、浏览器窗口缩放。

代码如下：

// 模拟一段ajax请求

function ajax(content) {

   console.log(content)

}

// 防抖函数

function debounce(fun, delay) {
   
   let interval = delay || 500

   return function (args) {

       let that = this

       let _args = args

       clearTimeout(fun.id)

       fun.id = setTimeout(function () {

       fun.call(that, _args)

       }, interval)
   }
}

let debounceAjax = debounce(ajax, 500)


// 节流函数

function throttle(fun, delay){
       let last, deferTimer
       
       let interval = delay || 500

       return function(args){

       let that = this

       let _args = arguments

       let now = +new Date()

       if (last && now - last < interval) {

       clearTimeout(deferTimer)

       deferTimer = setTimeout(function(){

       last = now

       fun.apply(that,_args)

       },interval)

       } else {

          last = now

          fun.apply(that,_args)
       }
   }
}

let throttleAjax = throttle(ajax, 1000)