一个简单的javascript节流器实现

节流器

下面来实现一个简单的节流器

 1 /**
 2 * 节流器
 3 * @param [function] fn 事件触发后要调用的函数，也就是要节流的函数
 4 * @param [object]context fn的执行上下文对象，没有执行对象设为null即可
 5 * @param [number] delay 延缓执行的时间间隔 毫秒
 6 * @param param fn需要的参数
 7 * @return 无
 8 */
 9 function throttle(fn, context, delay, param) {
10   clearTimeout(fn.timeoutId);
11 
12   fn.timeoutId = setTimeout(function () {
13     fn.call(context, param);
14   }, delay);
15 }

通过参数注释和代码应该能够大概看明白这个throttle要做的事情：延缓fn的执行，这个通过setTimeout函数来执行即可。

### 使用节流器

使用时也很简单，将fn、context、delay、params传入即可：

1 var ajaxFun = function() { // 略 };
2 throttle(ajaxFun, null, 500, someParams);

其实上面的节流器代码还可以再简化，不过就没有上面的健壮了。

1 // 节流器
2 function throttle(fn, delay, param) {
3   setTimeout(function () {
4     fn(param);
5   }, delay);
6 }

这篇文章最初发表在我自己折腾的博客站点上：一个简单的javascript节流器实现，该博客用了一位前辈开源的源码，基于thinkjs和vuejs开发，欢迎大家来逛逛。