JavaScript 节流函数
栏目: JavaScript · 发布时间: 5年前
内容简介:“节流”,字典上这么解释:[throttle]∶节制流入或流出,尤指用节流阀调节。那节流函数 (throttle) 就是 “节制流入或流出的函数”,越来越绕了,这是什么鬼?刚开始接触这种名词,反正我是有点摸不着头脑,略抽象,不好理解。
“节流”,字典上这么解释:
[throttle]∶节制流入或流出,尤指用节流阀调节。
那节流函数 (throttle) 就是 “节制流入或流出的函数”,越来越绕了,这是什么鬼?刚开始接触这种名词,反正我是有点摸不着头脑,略抽象,不好理解。
那放下这术语不管,先看看为什么要用它。
场景
页面事件中,scroll, resize 和 mousemove 事件都有一个共同点,就是会频繁地被触发。举个例子,那 scroll 来看好了。
先写一段代码:
let num = 1 window.onscroll = () => { console.log(num++) } 复制代码
这里监听了页面的 scroll 事件,当页面滚动时,打印出递增的数字。
下图是运行结果,可以看到,console 里面疯狂输出:
回想一下最常用的 click 事件,是不是老老实实,点一次,执行一次。而 scroll 呢,滚动一小段,好几次就去了。这里还好,不涉及到 DOM 操作,要是在 scroll 事件中处理 DOM 元素,那页面性能肯定受到影响,笔记本风扇说不定随着滚动的页面呼呼作响,或者页面一卡一卡卡出心脏病。
让它消停点的办法,就是让回调少执行几次。提到让疯狂执行的函数少执行几次,限制它的行为,“节流”这个概念是不是隐隐约约出现,不再那么抽象了?就好比把水龙头关小一点,让水慢慢流。
方法
怎么让这个函数慢慢流呢?
设想一下,页面一直在滚动,根本停不下来。这个时候,回调也一直在触发,噼里啪啦。
和它商量一下: “你能不能隔几秒执行一次?”
"隔几秒?"
"两百毫秒吧。"
节流函数就是给这种高频率触发的函数,规定一个时间间隔,就是这一次执行和下一次执行的时间间隔。
有点像游戏里面的技能冷却时间,放了技能,进入冷却时间,这期间,就算不停地点技能,也放不了,只能等冷却好,再放。
千言万语不如上代码:
const throttle = (func, ms = 200) => { let prev = new Date().getTime() return function(...args) { let now = new Date().getTime() if (now - prev >= ms) { func() prev = now } } } 复制代码
这里的 throttle 函数接受一个函数 func
和一个毫秒数 ms
作为参数,返回一个函数。当返回的函数不停地被触发,只有满足两次触发间隔大于或者等于规定的毫秒数,传入的 func
才执行。
这个间隔是用时间戳来判断的。首先定义变量 prev
记录一个时间,在返回的函数中,取得它执行时的时间戳 now
,比较两个时间戳,假如间隔大于规定的毫秒数 ms
,就执行传入的 func
函数。
拿上面的例子再举个例子:
let num = 1 window.onscroll = throttle(()=> {console.log(num++)}, 2000) 复制代码
这里监听页面滚动事件,每两秒触发一次回调函数。如下所示(没有慢放):
当然,实际开发中,不会两秒一次这么夸张。这里只是为了更明显地观察到节流函数的作用。
总结
节流函数为高频率触发的回调设定一个执行周期,减少对页面性能的损耗。
可用于 resize, scroll, mousemove 这些事件的回调函数。
以上所述就是小编给大家介绍的《JavaScript 节流函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。