JavaScript 节流函数

栏目: JavaScript · 发布时间: 5年前

内容简介:“节流”,字典上这么解释:[throttle]∶节制流入或流出,尤指用节流阀调节。那节流函数 (throttle) 就是 “节制流入或流出的函数”,越来越绕了,这是什么鬼?刚开始接触这种名词,反正我是有点摸不着头脑,略抽象,不好理解。

“节流”,字典上这么解释:

[throttle]∶节制流入或流出,尤指用节流阀调节。

那节流函数 (throttle) 就是 “节制流入或流出的函数”,越来越绕了,这是什么鬼?刚开始接触这种名词,反正我是有点摸不着头脑,略抽象,不好理解。

那放下这术语不管,先看看为什么要用它。

场景

页面事件中,scroll, resize 和 mousemove 事件都有一个共同点,就是会频繁地被触发。举个例子,那 scroll 来看好了。

先写一段代码:

let num = 1
window.onscroll = () => {
  console.log(num++)
}
复制代码

这里监听了页面的 scroll 事件,当页面滚动时,打印出递增的数字。

下图是运行结果,可以看到,console 里面疯狂输出:

JavaScript 节流函数

回想一下最常用的 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)
复制代码

这里监听页面滚动事件,每两秒触发一次回调函数。如下所示(没有慢放):

JavaScript 节流函数

当然,实际开发中,不会两秒一次这么夸张。这里只是为了更明显地观察到节流函数的作用。

总结

节流函数为高频率触发的回调设定一个执行周期,减少对页面性能的损耗。

可用于 resize, scroll, mousemove 这些事件的回调函数。


以上所述就是小编给大家介绍的《JavaScript 节流函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通正则表达式

精通正则表达式

弗里德尔 / 东南大学出版社 / 2005-9 / 72.00元

正则表达式是一种用来操作文本和数据的强大工具。近年来,它们快速广泛传播,并被多种流行工具和语言作为标准特性提供,如Perl、Java、VB.NET、C#(及任何使用.NET框架的语言)、PHP、Python、Ruby、Tcl、MySQL、awk、Emacs等。 如果还未使用过正则表达式,从本书中您将发现一个掌控数据的全新世界。如果使用过它们,您将会充分意识到本书空前的深度和广度。如果您认为自己已经......一起来看看 《精通正则表达式》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试