当前位置: 首页 > news >正文

函数的节流(throttle)

前言

        浏览器中某些计算和处理要比其他的昂贵的多。例如,DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起,有时候甚至会崩溃。为了绕开这个问题,你可以使用定时器对该函数进行节流操作。

一、节流(throttle)是什么?

        节流(throttle)指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思,会稀释函数的执行频率。

二、使用方法

节流(throttle)有两个版本分别是时间戳和定时器版

1.时间戳版

代码如下(示例):

// 时间戳版
function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let context = this;let args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}}
}

使用方法是content.onmousemove = throttle(count,1000);

效果如下:

在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次。

2.定时器版

代码如下(示例):
// 定时器版
function throttle(func, wait) {let timeout;return function() {let context = this;let args = arguments;if (!timeout) {timeout = setTimeout(() => {timeout = null;func.apply(context, args)}, wait)}}
}

使用方法同上:content.onmousemove = throttle(count,1000);

效果如下:

在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次


总结

        我们应该可以很容易的发现,其实时间戳版和定时器版的节流函数的区别就是,时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。

通过以上操作就可以实现函数的节流(throttle)。


http://www.taodudu.cc/news/show-6309770.html

相关文章:

  • js 中 throttle 的实现
  • JavaScript 节流函数 throttle 详解
  • 节流(Throttle)与防抖(Debounce)区别与demo实现+ 图解
  • 网络分层,图,易懂--对应 应用层、数据传输层、网络层、数据链路层
  • 【图论基础】分层图
  • 数据分层(方法论)
  • 分层图[模板]
  • 食物链(分层图?)
  • 分层图总结(例题)
  • 拆点/分层图的使用
  • 分层架构简图
  • 数据分层简述
  • 简谈分层图
  • 数据流图-2(分层数据流图)
  • 流程图分级、分类、分层
  • 什么是分层架构
  • 链路聚合的原理以及配置
  • 链路聚合—3种模式
  • 链路聚合及配置
  • 交换机之间的链路聚合
  • 链路聚合与链路捆绑
  • 链路聚合和LACP
  • 链路聚合(二层链路聚合划分)
  • 链路聚合—3种模式 详细
  • 【技术分享】链路聚合
  • 链路聚合详解
  • 链路聚合的作用与实例
  • 链路聚合原理及配置过程
  • 链路聚合(eth-trunk)
  • 链路聚合的定义、链路聚合的概念和基本术语、链路聚合的特点