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 节流函数》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Webbots、Spiders和Screen Scrapers

Webbots、Spiders和Screen Scrapers

斯昆克 / 2013-5 / 69.00元

《Webbots、Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)》共31章,分为4个部分:第一部分(1~7章),系统全面地介绍了与Webbots、Spiders、Screen Scrapers相关的各种概念和技术原理,是了解和使用它们必须掌握的基础知识;第二部分(8~16章),以案例的形式仔细地讲解了价格监控、图片抓取、搜索排名检测、信息聚合、FTP信息、阅读与发......一起来看看 《Webbots、Spiders和Screen Scrapers》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具