函数节流,分时函数

原创 lingwer111 随笔 JavaScript 231阅读 2017-05-11 11:15:12 举报

某些时候,函数有可能会被频繁调用,造成性能问题,比如
window.onresize 事件。我们给 window 对象绑定了 resize 事件,当浏览器窗口大小被拖动而改变的时候,这个事件触发的频率非常之高。如果我们在 window.onresize 事件函数里有一些跟 DOM 节点相关的操作,而跟 DOM 节点相关的操作往往是非常消耗性能的,
这时候浏览器可能就会吃不消而造成卡顿现象

mousemove 事件。同样,如果我们给一个 div 节点绑定了拖曳事件(主要是 mousemove) ,当div 节点被拖动的时候,也会频繁地触发该拖曳事件函数。

上传进度。微云的上传功能使用了一个浏览器插件。该浏览器插件在真正开始上传文件之前,会对文件进行扫描并随时通知 JavaScript 函数,以便在页面中显示当前的扫描进度。但该插件通知的频率非常之高,大约一秒钟 10 次,很显然我们在页面中不
需要如此频繁地去提示用户。

函数节流的原理
我们整理上面提到的三个场景,发现它们面临的共同问题是函数被触发的频率太高。

比如我们在 window.onresize 事件中要打印当前的浏览器窗口大小,在我们通过拖曳来改变窗口大小的时候,打印窗口大小的工作 1 秒钟进行了 10 次。而我们实际上只需要 2 次或者 3 次。这就需要我们按时间段来忽略掉一些事件请求,比如确保在 500ms 内只打印一次。很显然,我们
可以借助 setTimeout 来完成这件事情。
函数节流的代码实现
关于函数节流的代码实现有许多种,下面的 throttle 函数的原理是,将即将被执行的函数用setTimeout 延迟一段时间执行。如果该次延迟执行还没有完成,则忽略接下来调用该函数的请求。throttle 函数接受 2 个参数,第一个参数为需要被延迟执行的函数,第二个参数为延迟执行的时
间。具体实现代码如下:
html 代码

分时函数
在前面关于函数节流的讨论中,我们提供了一种限制函数被频繁调用的解决方案,下面我们将遇到另外一个问题。某些函数是用户主动调用的,因为客观原因,这些函数会严重影响页面性能。
例如处理大量数据的时候。现在模拟20万条节点插入。(电脑不好的不要点预览。我电脑处理完这20万条节点插入,页面失去响应5秒左右)
html 代码

针队这个问题,解决方案之一是下面的timeChunk函数, timeChunk函数让节点创建工作分批进行,比如把一秒钟创建1000个节点,改为每200毫秒间隔创建100个节点。适当控制每批加载的数量,用户打开之后立即就有内容。虽然加载时间延长了。但绝对不会卡。
html 代码

参考 《JavaScript 设计模式与开发实践》

评论 ( 1 )
最新评论
老姚 2017-05-11 14:11:34 1F

函数节流,是关小水龙头,不需要那么大流量。
函数防抖,是防止手抖,短时间内只需要一个。