首页 > 代码库 > 设计模式（节流模式）
设计模式（节流模式）
今天来说说节流模式。平时对于重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作调高性能。
比如：可能有些朋友在做上拉加载（请求服务数据）迅速滑动时候会遇到这样的问题感觉一卡一卡的，一方面是请求服务器，另一方面是取到数据后进行数据渲染和操作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为函数对象复制给fn10 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 }
总结：节流函数简单的想就是重复多次调用一个函数时候，只执行最后一次
设计模式（节流模式）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。