节流模式
节流模式(Throttle):对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能。
实现一个节流器
var throttle = function(){ var isClear = arguments[0],fn; if(typeof isClear === 'boolean'){ fn = arguments[1]; fn.__throttleID && clearTimeout(fn.__throttleID); }else{ fn = isClear; param = arguments[1]; var p = extend({ context :null, argus : [], time : 300 },param); arguments.callee(true,fn); fn.__throttleID = setTimeout(function(){ fn.apply(p.context,p.args) },p.time) } }
构造节流器的思路:第一件事情就是要清除将要执行的函数,传递两个参数(是否清除,执行函数),如果一个参数为true,表明清除将要执行的函数,判断第二个参数有没有计时器句柄,有则清除计时器。第二件事情就是延迟执行函数,传递两个参数执行函数和相关参数,在节流器内部为执行函数绑定一个计时器句柄,保存该执行函数的计时器,相关参数包括执行时的作用域、执行函数的参数、执行函数的延迟执行的时间。
节流器在优化加载,提高性能的问题上有很大作用。DOM操作常常会占用大量的内存资源和CPU处理时间,甚至大量的DOM操作会使得一些浏览器崩溃,由于JS的单线程处理机制,导致DOM操作占用大量资源时会严重堵塞后面重要程序的执行。
设计模式 文章被收录于专栏
设计模式