防抖和节流

防抖：只要不是最后一次触发，就不执行异步请求

var timer;  //undefined
window.onscroll=function(){
  //如果当前 timer 不为空，说明前面有一个正在等待的请求，还未发送，就停止前面的等待
  if(timer !== undefined){
    clearTimeout(timer);
  }
  //再重新开始下一轮等待
  timer=setTimeout(function(){
    //当 200ms 内未发生滚动时，才发送正式的 ajax 请求
    console.log("发送ajax请求，加载更多数据");
  },200);
}

 

节流：第一次发送请求后，只要响应没回来，就不能发送第二次

<button style="position:fixed;right:0;bottom:200px">加载更多</button>

var canClick=true;  //设置一个开关变量，来控制按钮是否可以单击
btn.onclick=function(){
  if(canClick){//如果当前开关开着，说明可以单击
    canClick=false;  //先关闭开关
    //再发送请求
    console.log("发送ajax请求，加载更多数据...");
    setTimeout(function(){
      console.log("加载完成！");
      //在请求的回调函数结尾，重新打开开关，允许下次单击
      canClick=true;
    },3000)