节流器
的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台的接口,就会对服务器产生一定压力。这时就可以考虑采用某种方法来延缓ajax请求,比如可以这么做,当触发input事件后,延缓0.5s再调用后台的接口,这样在一定程度上就可以减轻服务端的压力。
下面来实现一个简单的节流器
1 /** 2 * 节流器 3 * @param [function] fn 事件触发后要调用的函数,也就是要节流的函数 4 * @param [ ]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 }
这篇文章最初发表在我自己折腾的博客站点上:一个简单的 节流器实现,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛。
继续阅读与本文标签相同的文章
上一篇 :
波士顿动力公司准备生产成千上万的机器狗
下一篇 :
Facebook宣布其正在使用新的互联网卫星
-
Python快递鸟API接口对接(即时查询|物流跟踪|电子面单|单号识别)
2026-05-18栏目: 教程
-
免费物流快递单号查询API接口及使用教程
2026-05-18栏目: 教程
-
【译】Hadoop发生了什么?我们该如何做?
2026-05-18栏目: 教程
-
阿里云上云企业案例周刊·第2期
2026-05-18栏目: 教程
-
虚拟机模拟部署Extended Clusters(一)基础环境准备
2026-05-18栏目: 教程
