JavaScript专题系列之节流（系列四）余光的博客- | ImapBox

JavaScript专题系列之节流（系列四）余光的博客-

06 八月
星期四, 06 八月 2020 06:50 Last Updated on 星期四, 06 八月 2020 06:50 0 Comments


节流

目录

前言

接着《JavaScript专题进阶之防抖》，我们来聊一聊节流——另一个优化函数的思想。

我们还是以移动事件举例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #wrapper { width: 100%; height: 140px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 30px; font-weight: bold; line-height: 140px; text-align: center; } </style> </head> <body> <div id="wrapper"></div> <script> var count = 1; function moveAction () {             oWrapper.innerHTML = count++; } var oWrapper = document.querySelector('#wrapper');   oWrapper.onmousemove = moveAction; </script> </body> </html>

它的效果是这样：

JavaScript专题系列之节流（系列四）余光的博客-

一、核心和基本实现

节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。

关于节流的实现，有两种主流的实现方式：

  1. 时间戳思路
  2. 定时器思路

1.1 时间戳思路

顾名思义，通过两个时间戳来控制时间间隔，当触发事件的时候：

  1. 我们取出当前的时间戳 now；
  2. 然后减去之前执行时的时间戳(首次值为 0 ) prev；
  3. 如果大now - prev > wait，证明时间区间维护结束，执行指定事件，更新prev；

根据这一思路，我们就可以实现第一版代码了：

oWrapper.onmousemove = throttle(moveAction, 1000); function throttle(func, wait) { var _this, arg; var prev = 0; // 上一次触发的时间，第一次默认为0 return function () { var now = Date.now(); // 触发时的时间         _this = this; if (now - prev > wait) {             func.apply(_this, arg); // 允许传入参数，并修正this             prev = now; // 更新上一次触发的时间 } } }

来看看借助它，效果是什么样的：

JavaScript专题系列之节流（系列四）余光的博客-

我们可以看到：

  1. 当鼠标移入的时候，事件立刻执行
  2. 每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。

1.2 定时器思路

利用定时器来保证间隔时间内事件的触发次数

  1. 创建定时器timer，记录当前是否在周期内；
  2. 判断定时器是否存在，若存在则直接结束，否则执行事件；
  3. wait时间之后再次执行，并清掉定时器；

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func, wait) { var _this, arg; var timer; // 初始化 return function () {         _this = this; // 记录this         arg = arguments; // 记录参数数组 if (timer) return; // 时候未到         timer = setTimeout(() => {             func.apply(_this, arg); // 允许传入参数，并修正this             timer = null; }, wait); } }

来看看借助它，效果是什么样的：

JavaScript专题系列之节流（系列四）余光的博客-

但是，我们可以看到：

  1. 当鼠标移入的时候，事件不会立刻执行;
  2. 鼠标定制后wait间隔后会执行一次

1.3 两种思路的区别

时间戳 定时器
“起点” 立即执行 n 秒后执行
“终点” 停止后不会执行 停止会再执行一次

二、节流进阶

结合两种思想完成一个可以立即执行，且停止触发后再执行一次的节流方法：

// 第三版 function throttle(func, wait) { var timeout, context, args, result; var previous = 0; var later = function() {         previous = +new Date();         timeout = null;         func.apply(context, args) }; var throttled = function() { var now = +new Date(); //下次触发 func 剩余的时间 var remaining = wait - (now - previous);         context = this;         args = arguments; // 如果没有剩余的时间了或者你改了系统时间 if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout);                 timeout = null; }             previous = now;             func.apply(context, args); } else if (!timeout) {             timeout = setTimeout(later, remaining); } }; return throttled; }

效果演示如下：

JavaScript专题系列之节流（系列四）余光的博客-

我在看代码的时候，我是反复打印数据才理解为什么会这样做，一起加油～

参考

写在最后

JavaScript专题系列之节流（系列四）余光的博客-

前端专项进阶系列的第二篇文章，希望它能对大家有所帮助，如果大家有什么建议，可以在评论区留言，能帮到自己和大家就是我最大的动力！

JavaScript专题系列：

  1. JavaScript中的变量提升与预编译，一起去发现Js华丽的暗箱操作（系列一）
  2. JavaScript专题之数组去重（系列二）
  3. JavaScript专题之数组防抖（系列三）
  4. 本文

另外推荐大家阅读一下我的《前端内功进阶系列》

关于我

  • 花名：余光
  • WX：j565017805
  • 沉迷JS，水平有限，虚心学习中

其他沉淀

如果您看到了最后，不妨、、关注一下吧！您的三连就是我最大的动力，虚心接受大佬们的批评和指点，共勉！

JavaScript专题系列之节流（系列四）余光的博客-

MySQL数据库从入门实战课

12-31
限时福利1：购课进答疑群专享柳峰（刘运强）老师答疑服务。 限时福利2：购课后添加学习助手（微信号：csdn590），按消息提示即可领取编程大礼包！ 注意：原价129的课程，最后2天限时秒杀仅需49元！！ 为什么说每一个程序员都应该学习MySQL？ 根据《2019-2020年中国开发者调查报告》显示，超83%的开发者都在使用MySQL数据库。 使用量大同时，掌握MySQL早已是运维、DBA的必备技能，甚至部分IT开发岗位也要求对数据库使用和原理有深入的了解和掌握。 学习编程，你可能会犹豫选择 C++ 还是 Java；入门数据科学，你可能会纠结于选择 Python 还是 R；但无论如何， MySQL 都是 IT 从业人员不可或缺的技能！ 【课程设计】 在本课程中，刘运强老师会结合自己十多年来对MySQL的心得体会，通过课程给你一条高效的MySQL入门捷径，让学员少走弯路，彻底搞懂MySQL。 本课程包含3大模块：  一、基础篇： 主要以最新的MySQL8.0安装为例帮助学员解决安装与配置MySQL的问题，并对MySQL8.0的新特性做一定介绍，为后续的课程展开做好环境部署。 二、SQL语言篇： 本篇主要讲解SQL语言的四大部分数据查询语言DQL，数据操纵语言DML，数据定义语言DDL，数据控制语言DCL，学会熟练对库表进行增删改查等必备技能。 三、MySQL进阶篇： 本篇可以帮助学员更加高效的管理线上的MySQL数据库；具备MySQL的日常运维能力，语句调优、备份恢复等思路。  



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录