安利一个js节流库

它在这里

github.com/imsasa/ithr…

这样用

npm install ithrottle

let debounce=require(ithrottle).debounce;
let throttle=require(ithrottle).throttle;

debounce

每指定时间 t 内的再次调用会促使函数再次延长 t 后执行。

情景举例01:

在进行文本框输入的同时，通常会要求对输入的内容进行校验，并即时将检验结果反馈给用户。每录入一个字符都校验，是不必要的，因为用户很可能还要继续录入。那么在用户停止录入1秒后执行验证吧。

let fn=debounce(yourValidateFn,1000);
inputEl.addEventListener("input",fn);

情景举例02：

如上图，你希望3s内不管用户点击按钮多少次都只有第一次生效，且只有用户停止点击3秒后才能再次点击。那么：

let fn=debounce(yourSearchFn,3000,{immediate:true});
searchBtn.addEventListener("click",fn);

throttle

触发函数的频率很高，但又希望函数以固定的较慢的节奏来执行。

情景举例03：

鼠标移动、窗口缩放之类的事件触发频率非常高。上图中，希望小方块跟随跟随鼠标移动，可以：

let fn=throttle(yourMoveFn,50);
document.body.onmousemove=()=>fn;

情景举例04：

函数执行后，指定时间t内的调用无效。如上图中获取验证码，我们希望用户获取验证码的频率小于 1次/分钟。那么：

let fn=throttle(yourGetVerifyCodeFn,60*1000,{immediate:true,leave:true});
btn.on("click",fn);

扩展

• 使用promise参数得到函数执行后的结果；

  let fn=throttle(()=>"foo"),100,{promise:true});
  //fn是一个Promise对象
  fn().then((returnValue)=>console.log(returnValue));
  

• 使用方法clear放弃执行函数；

    let fn=throttle(actionFn,100);
    fn();//actionFn会在100ms后执行
    fn.clear()//放弃执行的actionFn
  

最后那么：
加个星吧： github.com/imsasa/ithr…