【Web前端基础】js定时器有哪些

2021-01-19 10:27发布

18条回答
三岁奶猫
2楼 · 2021-01-19 13:15
  • timeoutId: 定时器ID

  • func: 延迟后执行的函数

  • code: 延迟后执行的代码字符串,不推荐使用原理类似eval()

  • delay: 延迟的时间(单位:毫秒),默认值为0

  • param1,param2: 向延迟函数传递而外的参数,IE9以上支持

setInterval: 以固定的时间间隔重复调用一个函数或者代码段

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
  • intervalId: 重复操作的ID

  • func: 延迟调用的函数

  • code: 代码段

  • delay: 延迟时间,没有默认值

setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);
  • immediateId: 定时器ID

  • func: 回调

requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)

var requestId = window.requestAnimationFrame(func);
  • func: 回调


拥抱太阳月亮
3楼 · 2021-01-19 14:34

js的定时器有以下这些:


✔网页端常用:requestAnimationFrame, setInterval, setIimeout
✔node端常用:nextTick,setImmediate,setIimeout,setInterval

我是大脸猫
4楼 · 2021-01-19 14:43

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。

一、什么是定时器

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下 setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
  • timeoutId: 定时器ID

  • func: 延迟后执行的函数

  • code: 延迟后执行的代码字符串,不推荐使用原理类似eval()

  • delay: 延迟的时间(单位:毫秒),默认值为0

  • param1,param2: 向延迟函数传递而外的参数,IE9以上支持

setInterval: 以固定的时间间隔重复调用一个函数或者代码段

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
  • intervalId: 重复操作的ID

  • func: 延迟调用的函数

  • code: 代码段

  • delay: 延迟时间,没有默认值

setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);
  • immediateId: 定时器ID

  • func: 回调

requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)

var requestId = window.requestAnimationFrame(func);
  • func: 回调

上面简单的介绍了四种JS的定时器,而本文将会主要介绍比较常用的两种:setTimeout和setInterval。

二、举个栗子

  • 基本用法

// 下面代码执行之后会输出什么?
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

// 分别输出: 2、4、5
  • setInterval 和 setTimeout的区别?

// 执行在面的代码块会输出什么?
setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout,每隔1S输出一次 interval

/*--------------------------------*/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么?
var callback = function () {
    if (times++ > max) {
        clearTimeout(timeoutId);
        clearInterval(intervalId);
    }

    console.log('start', Date.now() - start);
    for (var i = 0; i < 990000000; i++) {}
    console.log('end', Date.now() - start);
},
delay = 100,
times = 0,
max = 5,
start = Date.now(),
intervalId, timeoutId;

function imitateInterval(fn, delay) {
    timeoutId = setTimeout(function () {
        fn();

        if (times <= max) {
            imitateInterval(fn ,delay);
        }
    }, delay);
}

imitateInterval(callback, delay);
intervalId = setInterval(callback, delay);

如果是setTimeout和setInterval的话,它俩仅仅在执行次数上有区别,setTimeout一次、setIntervaln次。 而通过setTimeout模拟的setInterval与setInterval的区别则在于:setTimeout只有在回调完成之后才会去调用下一次定时器,而setInterval则不管回调函数的执行情况,当到达规定时间就会在事件队列中插入一个执行回调的事件,所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响?

  • setTimeout(func, 0) 和 setImmediate(func)谁更快?(仅仅是好奇,才写的这段测试)

console.time('immediate');
console.time('timeout');

setImmediate(() => {
    console.timeEnd('immediate');
});

setTimeout(() => {
    console.timeEnd('timeout');
}, 0);

在Node.JS v6.7.0中测试发现setTimeout更早执行

  • 面试题

下面代码运行后的结果是什么?

// 题目一
var t = true;
 
setTimeout(function(){
    t = false;
}, 1000);
 
while(t){}
 
alert('end');

/*--------------------------------*/

// 题目二
for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0);
}

/*--------------------------------*/

// 题目三
var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        setTimeout(function () {
            this.shout();
        }, 0);    
    }
};
obj.waitAndShout();

问题答案会在后面解答

三、JS定时器的工作原理

在解释上面问题的答案之前我们先来了解一下定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图。 Timers 上图中,左侧数字代表时间,单位毫秒;左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作;蓝色方块表示正在执行的代码块;右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下:

  • 程序开始时,有一个JS代码块开始执行,执行时长约为18ms,在执行过程中有3个异步事件触发,其中包括一个setTimeout、鼠标点击事件、setInterval

  • 第一个setTimeout先运行,延迟时间为10ms,稍后鼠标事件出现,浏览器在事件队列中插入点击的回调函数,稍后setInterval运行,10ms到达之后,setTimeout向事件队列中插入setTimeout的回调

  • 当第一个代码块执行完成后,浏览器查看队列中有哪些事件在等待,他取出排在队列最前面的代码来执行

  • 在浏览器处理鼠标点击回调时,setInterval再次检查到到达延迟时间,他将再次向事件队列中插入一个interval的回调,以后每隔指定的延迟时间之后都会向队列中插入一个回调

  • 后面浏览器将在执行完当前队头的代码之后,将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述,实际的处理过程比这个复杂。

四、题目答案

好啦,我们现在再来看看上面的面试题的答案。 第一题

alert永远都不会执行,因为JS是单线程的,且定时器的回调将在等待当前正在执行的任务完成后才执行,而while(t) {}直接就进入了死循环一直占用线程,不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5,理由同上,当i = 0时,生成一个定时器,将回调插入到事件队列中,等待当前队列中无任务执行时立即执行,而此时for循环正在执行,所以回调被搁置。当for循环执行完成后,队列中存在着5个回调函数,他们的都将执行console.log(i)的操作,因为当前JS代码上中并没有使用块级作用域,所以i的值在for循环结束后一直为5,所以代码将输出5个5

第三题

这个问题涉及到this的指向问题,由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象,window对象中并不存在shout方法,所以就会报错,修改方案如下:
var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        var self = this; // 这里将this赋给一个变量
        setTimeout(function () {
            self.shout();
        }, 0);    
    }
};
obj.waitAndShout();

五、需要注意的点

  • setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同

  • 因为JS引擎只有一个线程,所以它将会强制异步事件排队执行

  • 如果setInterval的回调执行时间长于指定的延迟,setInterval将无间隔的一个接一个执行

  • this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

六、参考

  • MDN

  • How JavaScript Timers Work

  • JavaScript定时器与执行机制解析


HUANG
5楼 · 2021-01-19 15:32

javascript中一共有两个定时器:

1.  setTimeout,单次定时器,在规定时间(以毫秒计)过后执行一次函数或计算一次表达式;

var num = SetInterval("方法名()“,毫秒值);//每隔一定的毫秒值就执行函数
clearInterval(num);//什么时候想停止,将setInterval()的返回值num传给clearInterval(num)即可


2.  setInterval,循环定时器,每隔一段时间(以毫秒计)重复的执行一次函数或计算一次表达式。

var num = setTimeout("方法名()",毫秒值);//等待一定毫秒值之后执行函数
clearTimeout(num);//什么时候想停止,将setTimeout()的返回值num传给clearTimeout(num)即可


敦敦宁
6楼 · 2021-01-19 18:38
  • 在 js 里面,有两种定时器,倒计时定时器 和 间隔定时器

倒计时定时器(延时器 延时执行一次)

  • 倒计时多少时间以后执行函数

  • 语法: setTimeout(要执行的函数,多长时间以后执行)

  • 会在你设定的时间以后,执行函数

  • 时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟

  • 所以会在页面打开 1 秒钟以后执行函数

  • 只执行一次,就不在执行了

  • 返回值是,当前这个定时器是页面中的第几个定时器

间隔定时器

  • 每间隔多少时间就执行一次函数

  • 语法: setInterval(要执行的函数,间隔多少时间)

  • 时间和刚才一样,是按照毫秒进行计算的

  • 每间隔 1 秒钟执行一次函数

  • 只要不关闭,会一直执行

  • 返回值是,当前这个定时器是页面中的第几个定时器

定时器的返回值

  • 设置定时器的时候,他的返回值是部分 setTimeout 和 setInterval 的

  • 只要有一个定时器,那么就是一个数字

关闭定时器

  • 我们刚才提到过一个 timerId,是表示这个定时器是页面上的第几个定时器

  • 这个 timerId 就是用来关闭定时器的数字

  • 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

  • 关闭以后,定时器就不会在执行了

  • 关闭以后定时器就不会在执行了

  • 原则上是

clearTimeout 关闭 setTimeout

clearInterval 关闭 setInterval

  • 但是其实是可以通用的,他们可以混着使用

  • 以上就是JS定时器的用法


ban_gank
7楼 · 2021-01-20 08:58

网页端常用:requestAnimationFrame, setInterval, setIimeout
node端常用:nextTick,setImmediate,setIimeout,setInterval

小小李兆佳
8楼 · 2021-01-20 09:12

网页端常用:requestAnimationFrame, setInterval, setIimeout
node端常用:nextTick,setImmediate,setIimeout,setInterval

setIimeout,当时间达到后,有机会就执行
setInterval,按照指定间隔后把回调函数加入任务队列,js会逐个执行
setImmediate,任务队列执行完成后马上运行指定代码
nextTick,生成更细颗粒度的任务加入微任务队列,微任务队列优先级高于普通任务队列,在两个队列都有值的情况下,优先执行微任务队列
requestAnimationFrame,与setTimeout相比requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机,它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,常用于动画场景


熊晓燕
9楼 · 2021-01-20 09:34

js的定时器有以下这些:

✔网页端常用:requestAnimationFrame, setInterval, setIimeout

✔node端常用:nextTick,setImmediate,setIimeout,setInterval


相关问题推荐

  • 回答 97
    已采纳

    Js给初学者的印象总是那么的杂而乱,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置...

  • 回答 4

    看图:

  • 回答 18

    基本类型( 6种 ):Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol  ( 唯一 )

  • 回答 19

    JavaScript 使网页增加互动性,使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。...

  • 回答 15

    Number类型String类型Boolean类型Undefined类型Null类型

  • 回答 14

    空格在ASCII中的值为32,空字符为0,可本人觉得不就是都是为空的吗,没有什么区别?char mychar1,mychar2;mychar1=&#39; &#39;;mychar2=&#39;\0&#39;;printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...

  • 回答 16

    1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...

  • 回答 8

    向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...

  • 回答 2

    我觉得getTopWindow() 应该是他自己写的函数 mask  应该是getTopWindow()函数中 return 出的一个什么玩意show()  jQuery的显示

  • 回答 16

    看上图

  • 回答 9

    如图所示

  • 回答 12

    1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...

  • js选项卡的实现原理2021-06-15 21:48
    回答 6

    如图所示,最简单的选项卡思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示,所以...

  • 回答 4

    1、js截取两个字符串之间的内容:123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert&#40;str&#41;;//结果bbbcccdddeee2、js截取某个字符串前面的内容:123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......

  • 回答 4

    如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.

没有解决我的问题,去提问