js -防抖节流

一，防抖

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

应用：

搜索框在输入稍有停顿时才更新推荐热词

function debounce(handler, delay) {
    delay = delay || 300;
    var timer = null;
  
    return function () {
      var _self = this,
        _args = arguments;
  
      clearTimeout(timer);
      timer = setTimeout(function () {
        handler.apply(_self, _args);
      }, delay);
    };
  }

　　

二，节流

使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

应用：

- 抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
- 频繁点击图片验证码

function throttle(handler, wait) {
    wait = wait || 300;
    var lastTime = 0; 
  
    return function () {
      var _self = this,
        _args = arguments;
  
      var nowTime = new Date().getTime();
      if (nowTime - lastTime > wait) {
        handler.apply(_self, _args);
        lastTime = nowTime;
      }
    };
  }
  function handler(){
      console.log('111')
  }
window.addEventListener("mousemove",throttle(handler,2000))