计时器、延时器的学习

setInterval、setTimeout

1，setInterval()设置计时器 clearInterval()清除计时器

在使用计时器的过程中，我们需要注意以下几点：

（1）在运行过程中，是不可以重新给setInterval赋值计时时间的。

（2）setInterval参数问题：

第一个参数function，必填的，回调函数，可以是一个函数，也可以是一个函数名。

第二个参数delay，可选的，间隔时间，单位是ms。

第三个参数param1,param2,param3…,可选的，是传递给回调函数的参数，比较不常用到，在IE9 及其更早版本不支持该参数。

（3）setInterval的返回值问题：

 let time1 = setInterval(function () {}, 1000); //2let time2 = setInterval(function () {}, 1000); //3let time3 = setInterval(function () {}, 1000); //4console.log(time3);//4

从以上可以看出来setInterval的返回值是是一个数字并且是可以累加的，由于它是该计时器的唯一标识，因此我们便可以将这个唯一的数字传递给clearInterval()以取消执行某个计时器。

（4）由于js是单线程（轮转时间片）以及垃圾内存回收问题（增量标记）导致setInterval并不一定是准时的。

let date1 = new Date().getTime(); //获取到开始时的时间戳
setInterval(function () {let date2 = new Date().getTime(); //获取到每次执行后的时间戳console.log(date2 - date1);date1 = date2;
}, 1000);

2，setTimeout()延时器 clearTimeout()清除延时器

在使用setTimeout延时器时，我们需要注意以下几点：

（1）可以在执行的过程中，改变执行时间。

（1）setTimeout的参数问题：

第一个参数function，必填的，回调函数，可以是一个函数，也可以是一个函数名。

第二个参数delay，可选的，延迟时间，单位是ms。

第三个参数param1,param2,param3…,可选的，是传递给回调函数的参数，比较不常用到，在IE9 及其更早版本不支持该参数。

（2）setTImeout返回值问题：

let time1 = setTimeout(function () {}, 1000); //2
let time2 = setTimeout(function () {}, 1000); //3
let time3 = setTimeout(function () {}, 1000); //4
console.log(time3);//4

从上面可以看出来setTimeout的返回值是是一个数字并且是可以进行累加的，由于它是延时器的唯一标识，因此便可以将这个数字传递给clearTimeout()来取消执行某个延时器。

（3）由于js是单线程以及垃圾内存回收的问题导致setTimeout并不一定就是准时执行的。

let date1 = new Date().getTime(); //获取到开始时的时间戳
setTimeout(function () {let date2 = new Date().getTime(); //获取到每次执行后的时间戳console.log(date2 - date1); //1016 并不是我们设置的1000毫秒
}, 1000);

注意：在setInterval和setTimeout同时存在的情况下，两者是不会产生冲突的。

如何解决不准时的问题呢

web worker线程的使用

由于js是单线程的，其工作原理是将每一个任务切分成多个片段然后交给v8引擎去快速交替按照顺序执行这些片段，因此这个过程也称为轮转时间片。但是我们可以借助于 web worker 来模拟实现多线程：

基础概念

web worker 线程的作用就是给 js 创造多线程运行环境，它允许主线程创建一个worker线程，主线程运行的同时worker线程也在运行，两者互不干扰，worker线程运行结束后会将运行的最终结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。不过因为worker线程一旦创建就会一直运行，不会被主线程的活动打断，这样做虽然有利于随时响应主线程但是同时也会造成资源的浪费，所以不应过度使用，用完注意随时关闭。

使用时的注意点

（1）文件同源的限制：为了安全，worker线程无法读取本地文件，它所加载的脚本必须来自网络并且需要与主线程的脚本同源。

（2）通信限制：由于worker线程与主线程不在同一个上下文，因此不能直接通信，需要通过postMessage方法来通信。

（3）因为worker线程一旦创建就会一直运行，不会被主线程的活动打断，这样做虽然有利于随时响应主线程但是同时也会造成资源的浪费，所以不应过度使用，用完注意随时关闭。

在主线程中生成 Worker 线程

使用Worker()构造函数：

第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的且只能加载 js 脚本，否则报错；

第二个参数是配置对象，该对象可选，它的作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });// Worker 线程
self.name         // myWorker

主线程中的常用api

worker.postMessage: 主线程往worker线程发消息，消息可以是任意类型数据，包括二进制数据。

worker.terminate: 主线程关闭worker线程。

worker.onmessage: 指定向worker线程发消息时的回调。

worker.onerror: 指定向worker线程发消息发生错误时的回调。

Worker线程中的常用api（worker的全局对象为 self，也代表子线程自身，因此可以通过self.name来查看本线程的名称）

self.postMessage: worker线程往主线程发消息，消息可以是任意类型数据，包括二进制数据。

self.close: worker线程自动关闭。

self.onmessage: 指定向主线程发消息时的回调。

self.onerror: 指定向主线程发消息发生错误时的回调。

常见的应用场景

（1）加密数据：有些加解密的算法比较复杂或者在加解密很多数据的时候，会非常耗费计算资源，导致UI线程无响应，因此这是使用Web Worker的好时机，使用Worker线程可以让用户更加无缝的操作UI。

（2）预加载数据：有时候为了提升数据加载速度，可以提前使用Worker线程获取数据，因为Worker线程是可以发送 XMLHttpRequest 的。

（3）预加载图片：有时候一个页面有很多图片或者有几个很大的图片的时候，如果业务限制不考虑懒加载，也可以使用Web Worker线程来加载图片。

计时器的应用场景

节流

核心思想：如果事件在计时器的时间范围内被再次触发，则不予理睬，必须等当前计时器的任务完成，才能启动下一个计时器的任务。这就好比公交车，10 分钟一趟，10 分钟内有多少人在公交站等我不管，10 分钟一到我就要发车走。

应用场景：监听计算滚动条的位置，但不必每次滑动都触发，可以适当降低计算的频率，而不必去浪费资源。

function throttle(func, delay) {let timer = null;return function () {if (!timer) {func.apply(this, arguments);timer = setTimeout(() => {timer = null;}, delay);} else {console.log("上一个定时器还未完成，请耐心等待~");}};
}

防抖

核心思想：每次事件被触发则删除原来的延时器，从而建立新的延时器。跟王者荣耀的回城功能类似，你反复触发回城功能，那么只认最后一次，从最后一次触发开始计时。

应用场景：用户查询东西时。

function debounce(func, delay) {let timeout;return function () {clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, arguments);}, delay);};
}

计时器、延时器的学习相关推荐

JavaScript学习笔记 06、DOM元素—③定时器与延时器
文章目录前言一.定时器(√) 1.1.介绍定时器与清除定时器方法(含案例) 1.2.解决按钮点击时设置定时器setInterval()的小问题 1.3.实际案例(设置与删除定时器) 二.延时器(√ ...
JavaScript延时器和计时器
延时器触发之后会进行指定时间的等待后执行 var t = setTimeout(function(){//使用setTimeout()会返回一个唯一的标示,通过clearTimeout(唯一标示)可 ...
前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
UE4材质着色器全面学习教程
你会学到什么通过所有着色器类型和设计的实际演示,学习创建材质要求对虚幻的基本理解会有所帮助了解纹理的一般知识(不仅限于UE4)也很有用描述在这个系列中,我将带你设置大量不同的材料,教你如何 ...
1.7 时间延时器和类的别名
1. 时间延时器 //等待一段时间,编写延时器 #include <iostream> #include <ctime> using namespace std; //time ...
点乘和叉乘的区别_关于延时和混响的区别与专用延时器与混响器的调控技巧
关于延时和混响的区别与专用延时器与混响器的调控技巧延时器与混响器是模拟室内声场声音信号特性的专用设备.在录音节目制作中,延时器和混响器可以在模拟的艺术声场中传递时间.空间.方位.距离等重要信息,并且可 ...
ArcGIS模型构建器案例学习笔记-字段处理模型集
ArcGIS模型构建器案例学习笔记-字段处理模型集联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 由四个子模型组成子模型1:判断字段是否存在方法:python工 ...
【JavaScript】- 打地鼠游戏(定时器嵌套延时器)
这里使用了定时器嵌套延时器的方法 js: window.addEventListener('load', () => {// 获取元素let start = document.querySele ...
flutter Timer 延时器，定时器详解
[flutter工具箱] Timer 概览重要属性主要用法引用延时定时循环取消定时器官方api地址概览 Timer是flutter自带的官方延时器工具,本篇研究一下Timer的用法. ...

计时器、延时器的学习

setInterval、setTimeout

计时器、延时器的学习相关推荐

最新文章

热门文章