设计模式(节流模式)

今天来说说节流模式。平时对于重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作调高性能。

比如:可能有些朋友在做上拉加载(请求服务数据)迅速滑动时候会遇到这样的问题感觉一卡一卡的,一方面是请求服务器,另一方面是取到数据后进行数据渲染和操作dom(这块是很耗费资源的),还有一方面是没有做节流,每次监听到scroll事件,就调用对应的函数。打个比方:你让一个人去做一件事,刚通知完你去做吧,他正在努力干的时候,你又让他重复去干,第一次没完,就重复第二次,第三次……这样早晚会累死的(可能我说的不恰当,大家可以留言比喻,哈哈)效率可想而知。

 下边上节流代码:

   

 1         var throttle = function() {
 2                 var isClear = arguments[0],//存储第一个参数
 3                     fn;
 4                 if(typeof isClear === "boolean") {//判断第一个参数是否为boolean,清除定时器
 5                     fn = arguments[1];
 6                     console.dir(fn._throttleID)
 7                     fn._throttleID && clearTimeout(fn._throttleID)
 8                 } else {
 9                     fn = isClear;//isClear为函数对象复制给fn
10                     param = arguments[1] || [];
11                     var p = extend({   //设置默认参数
12                         context: null,//执行函数时的作用域
13                         args: [],//相关参数
14                         time: 300//执行函数延迟时间
15                     }, param);
16                     arguments.callee(true, fn);//调用本函数 清除定时器
17                     fn._throttleID = setTimeout(function() {//计时
18                         fn.apply(p.context, p.args)//调用函数回调函数
19                     }, p.time);
20                 }
21             }

extend扩展方法:

1              var extend = function(olds, news) {
2                 for(var index in news) {
3                     olds[index] = news[index];
4                 }
5                 return olds;
6             }

总结:节流函数简单的想就是重复多次调用一个函数时候,只执行最后一次

时间: 2024-10-29 19:07:31

设计模式(节流模式)的相关文章

云计算设计模式(二十三)——Throttling节流模式

云计算设计模式(二十三)——Throttling节流模式 控制由应用程序使用,一个单独的租户或整个服务的一个实例的资源的消耗.这种模式可以允许系统继续运行并满足服务水平协议,即使当增加需求的资源放置一个极端载荷. 背景和问题 在云应用负载通常上变化的基础上的活动用户的数量或他们正在执行的活动类型的时间.例如,多个用户可能会在工作时间被激活,否则系统可能被要求在每月结束时执行计算昂贵的分析.也有可能是突然和意外的突发活动.如果系统的处理要求超过了可用的资源的能力,其将遭受性能不佳,甚至会失败.该系

设计模式(节流模式-----图片懒加载)

昨天把节流模式写了下,今天来个节流模式的应用----图片懒加载(图片延迟加载) 废话不多说,直接懒加载代码吧!哈哈 1 //创建懒加载对象 @id是将要获取外部容器的id var Lazyload = function(id) { 2 this.container = document.getElementById(id); 3 this.imgs = this.getImgs(); 4 this.init();//初始化 5 } 6 Lazyload.prototype = { 7 //初始化

设计模式 - 代理模式(proxy pattern) 未使用代理模式 详解

代理模式(proxy pattern) 未使用代理模式 详解 本文地址: http://blog.csdn.net/caroline_wendy 部分代码参考: http://blog.csdn.net/caroline_wendy/article/details/37698747 如果需要监控(monitor)类的某些状态, 则需要编写一个监控类, 并同过监控类进行监控. 但仅仅局限于本地, 如果需要远程监控, 则需要使用代理模式(proxy pattern). 具体方法: 1. 类中需要提供

设计模式 - 迭代器模式(iterator pattern) Java 迭代器(Iterator) 详解

迭代器模式(iterator pattern) Java 迭代器(Iterator) 详解 本文地址: http://blog.csdn.net/caroline_wendy 参考迭代器模式(iterator pattern): http://blog.csdn.net/caroline_wendy/article/details/35254643 Java的标准库(util)中包含迭代器接口(iterator interface), import java.util.Iterator; 继承(

设计模式 - 外观模式(facade pattern) 详解

外观模式(facade pattern) 详解 本文地址: http://blog.csdn.net/caroline_wendy 外观模式(facade pattern): 提供了一个统一的接口, 用来访问子系统中的一群接口. 外观定义了一个高层接口, 让子系统更容易使用. 外观模式包含三个部分: 1. 子系统: 子类, 单个复杂子类 或 多个子类; 2. 外观(facade)类: 把子系统设计的更加容易使用; 3. 客户: 只需要调用外观类. 与适配器模式(adapter pattern)的

设计模式——代理模式

概念 代理模式(Proxy),为其他对象提供一种代理以控制对象的访问. 模式结构 一个是真正的你要访问的对象(目标类),一个是代理对象,真正对象与代理对象实现同一个接口,先访问代理类再 访问真正要访问的对象. 代理模式UML图 代码实战 <span style="font-family:KaiTi_GB2312;font-size:18px;"> //代理模式 class  Proxy : IGiveGift                   //让"代理&qu

设计模式——门面模式

用于将对复杂某系统的访问统一化, 避免客户端过多的干涉某系统及其子系统. package designpattern.structure.facade; public class Facade { Subsystemclass1 s1 = new Subsystemclass1(); Subsystemclass2 s2 = new Subsystemclass2(); Subsystemclass3 s3 = new Subsystemclass3(); public void method1

设计模式 - 策略模式(Strategy Pattern) 具体解释

策略模式(Strategy Pattern) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26577879 本文版权全部, 禁止转载, 如有须要, 请站内联系. 策略模式: 定义了算法族, 分别封装起来, 让它们之间能够相互替换, 此模式让算法的变化独立于使用算法的客户. 对于父类的子类族须要常常扩展新的功能, 为了使用父类比較灵活的加入子类, 把父类的行为写成接口(interface)的形式; 使用set()方法

设计模式 - 组合模式(composite pattern) 详解

组合模式(composite pattern) 详解 本文地址: http://blog.csdn.net/caroline_wendy 组合模式: 允许你将对象组合成树形结构来表现"整体/部分"层次结构. 组合能让客户以一致的方法处理个别对象以及组合对象. 建立组件类(Component), 组合类(composite)和叶子类(leaf)继承组件类, 客户类(client)直接调用最顶层的组合类(composite)即可. 具体方法: 1. 组件类(component), 包含组合