消抖函数:
什么是消抖函数, 说一个自己应用的实例:
自己在做一个 项目里, 有一个需要监听 input 元素(oninput 、 onchange), 只要 它的value 变,就需要去 向服务器拉取数据。不做优化的, 用户对值进行操作时, 都向服务器端 拉去数据。例如: 事件A: 用户查询的内容为 5个字,那么这个操作, 就会向服务器 请求 5次数据。消抖就是定一个固定的t时间,延迟t时间后触发请求服务器数据。如果在t内,用户继续输入了文字。 清除上一个定时器, 重新开一个延迟为t的定时器。否则 直接触发 请求服务器数据的操作。这样对于 事件A 来说,选取合适的t, 最少只需要一次请求服务器数据。function debouce (fn, time, ctx) { var k = null function exec (args) { // 绑定 函数运行上下文(this) && 传入函数参数 fn.apply(ctx || null, args) k = null } return function () { var args = arguments k !== null && clearTimeout(k) k = setTimeout(function () {exec(args)}, time) }}//测试函数var test = debouce(function() {console.log(this);console.log(arguments)}, 3000, {a: 1})
节流函数
什么是节流函数, 类似与消抖函数,但是,不是仅仅有一个时间t而已, 还有一个
最大时间 maxLog. 当超过这个maxLog, 事件就必须触发。 这个主要用于对 滚动轴事件的优化。 想想用户 一直操作 鼠标滚轮,不可能一直按照消抖函数那样,一直不触发滚动事件相应的处理逻辑吧。var thrFn = function (fn, time, maxLog) { var timeK = null // var oTime = (new Date()).getTime() var execFn = function () { fn() oTime = (new Date()).getTime() } return function () { var nTime = (new Date()).getTime() clearTimeout(timeK) if (nTime - oTime > maxLog) { execFn() } else { timeK = setTimeout(execFn, time) } } }
个人理解,不对之处, 请大家指正。
下一文, 准备 reudx 源码解析。。。