#防抖节流

防抖节流

防抖

​ 防抖(debounce)就是在任务频繁触发下，为了优化性能，只有在任务触发的时间超过指定的间隔时间的时候，任务才会执行，只要不是最后一次触发就不会执行异步请求

应用场景：如输入框，频繁请求时，

• 输入框：输入之后会调用接口，获取关联词。但是因为频烦调用接口会导致性能降低，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现关联词

var timer;
window.onscroll = function() {
  // 如果当前的timer不是空，说明前面有一个等待的数据请求，还未发送
  if(timer !== undefined) {
  	clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log('发送请求，加载更多数据')
  },1000)
}

节流

节流(throttle)就是在指定的间隔时间内只会执行一次任务，第一次发送请求后，只要响应没有回来就不会触发第二次

应用场景：

1. 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取

2. 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次

# html代码
<button id="btn" style="position:fixed ;right: 0;bottom: 500px;">点我节流</button>
#script代码
//开关变量
var canClick = true;
btn.onClick = function() {
  if(canClcik) {
    if(canClick){
      canClick=false;//先关闭开关
      // 在发送请求
      console.log("发送请求");
      setTimeout(function(){
        console.log("节流成功");
        // 在请求的回调函数结尾，重新打开开关，允许下次单击
        canClick=true;
      },2000);
      }
  }
}