JS设计模式—节流模式的实际应用

在实际工作中，我们会经常遇到这样的业务场景，比如点击按钮提交表单，点击一次发一次请求，如果快速点击多次会发送多次请求，这样发送了多次请求是我们不愿意看到的。又比如输入框我们输入内容会调搜索的接口，那么每当我们输入一个字符都会发送一次请求......为了解决类似的困扰，那么节流模式就应运而生了。

//   节流模式的核心思想是创建定时器,延迟程序的执行.var throttle = function f() {arguments.slice = Array.prototype.slice;var fn,params=[];//如果第一个参数是boolean类型那么第一个参数表示清除定时器if(typeof arguments[0] === 'boolean') {//第二个参数为函数fn = arguments[1];//函数的计时器句柄存在，清除该定时器fn.__throttleID && clearTimeout(fn. __throttleID);//工作计时器延迟执行函数} else {fn = arguments[0];params = arguments.slice(1);f(true,fn);//为函数绑定句柄函数fn.__throttleID = setTimeout(function() {//执行函数fn.apply(null, params);}, 500)}}

　　下面让我们开尝试调用一下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="inputDom"/></body>
</html><script type="text/javascript">var content = document.getElementById('inputDom');function press() {console.log("开始输入了");}content.onkeyup = function (){throttle(press,1,2,3);}</script>

　　可以看到，当连续输入内容，在500毫秒内只发一次，这就达到了节流的效果了。

转载于:https://www.cnblogs.com/linxing/p/10984181.html

JS设计模式—节流模式的实际应用相关推荐

JS设计模式--组合模式
JS设计模式–组合模式昨天学习了白贺翔老师的JS组合模式,现在把我学到的分享出来叭O(∩_∩)O,直接看下面代码 <!DOCTYPE html> <html lang=" ...
js设计模式——组合模式
组合模式将对象组合成树形结构,以表示"部分-整体"的层次结构.除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表现,是的用户对单个对象和组合对象的使用具有一致性. ...
js设计模式-组合模式
组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...
JS设计模式——工厂模式
什么是工厂模式? 工厂模式(Factory Pattern)是创建型设计模式.在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来创建对象. 简单工厂模式假如有一个 ...
js设计模式——代理模式proxy
什么是代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. (可以想象一下明星与经纪人的关系,明星是请求的本体,经纪人就是代理proxy) 如何实现代理模式代理对象内部含有对本 ...
js 设计模式—工厂模式
1.简单工厂模式,又称为静态工厂方法,单一种类的复制使用 // 简单工厂函数封装动物 function A(name, six) {var o = new Object()o.name = nam ...
js设计模式--代理模式
/*定义: 代理是一个对象,它可以控制另一个对象的访问, 它与另外哪个对象实现了同样的接口, 并且会把任何方法调用传递给哪个对象. 注意:代理只是控制对另一个对象的访问,不会像装饰者那样添加或者修改另 ...
云计算设计模式（二十三）——Throttling节流模式
云计算设计模式(二十三)--Throttling节流模式控制由应用程序使用,一个单独的租户或整个服务的一个实例的资源的消耗.这样的模式能够同意系统继续执行并满足服务水平协议.即使当添加需求的资源放置 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...

JS设计模式—节流模式的实际应用

JS设计模式—节流模式的实际应用相关推荐

最新文章

热门文章