js中的防抖和节流总结

概述

我们在开发项目时，通常会出现以下情景：当我们有一个输入框时，用户在输入框里输入相应的内容，输入框即会=通过用户输入的内容像我们的服务器发送请求，而将搜索后的结果向我们做一个展示。这样的话，频繁的发送请求，会给我们的服务器造成较大的压力。所以我们得通过一些方法来减少服务器的压力——即进行发抖动操作。

防抖

• 触发事件在n秒内函数只能执行一次
• 如果在n秒内又触发了事件，则会重新有计算执行时间
• 单位时间内执行了n次，则会选中最后一次
• 特点：延迟，无限延后，不断的刷新计时器。

function debounce(func,delay){
  let timer = null//创建一个标志用来存放定时器的返回值
  return function (...args) {
    if (timer)  clearTimeout (timer)//每当用户输入的时候，把前面的清除掉 
    timer = setTimeout(()=>{//然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
      func.apply(this,args)
    },delay)
  }
}

节流

• 连续触发事件但是在n秒内只执行一次函数，节流会稀释函数的执行频率
• 单位时间内，执行n次，选中第一次
• 特点：只执行一次，看能不能触发事件

function throttle(fn,delay){
  let canRun  = true;//通过闭包保存一个标记
  return function(){// 在函数开头判断标记是否为true，不为true则return
     if(!canRun) return;
     canRun = false;// 立即设置为false
     setTimeOut(()=>{// 将外部传入的函数的执行放在setTimeout中
         fn.apply(this,arguments);
	      canRun=True; // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
	},delay);
  }
}