2021-01-19 10:27发布
timeoutId: 定时器IDfunc: 延迟后执行的函数code: 延迟后执行的代码字符串,不推荐使用原理类似eval()delay: 延迟的时间(单位:毫秒),默认值为0param1,param2: 向延迟函数传递而外的参数,IE9以上支持
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: 重复操作的IDfunc: 延迟调用的函数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: 定时器IDfunc: 回调
immediateId: 定时器ID
func: 回调
requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)
var requestId = window.requestAnimationFrame(func);
js的定时器有以下这些:
✔网页端常用:requestAnimationFrame, setInterval, setIimeout✔node端常用:nextTick,setImmediate,setIimeout,setInterval
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下 setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段
var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]); var timeoutId = window.setTimeout(code[, delay]);
上面简单的介绍了四种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();
问题答案会在后面解答
在解释上面问题的答案之前我们先来了解一下定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图。 上图中,左侧数字代表时间,单位毫秒;左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作;蓝色方块表示正在执行的代码块;右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下:
程序开始时,有一个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定时器与执行机制解析
javascript中一共有两个定时器:
1. setTimeout,单次定时器,在规定时间(以毫秒计)过后执行一次函数或计算一次表达式;
var num = SetInterval("方法名()“,毫秒值);//每隔一定的毫秒值就执行函数 clearInterval(num);//什么时候想停止,将setInterval()的返回值num传给clearInterval(num)即可
2. setInterval,循环定时器,每隔一段时间(以毫秒计)重复的执行一次函数或计算一次表达式。
var num = setTimeout("方法名()",毫秒值);//等待一定毫秒值之后执行函数 clearTimeout(num);//什么时候想停止,将setTimeout()的返回值num传给clearTimeout(num)即可
在 js 里面,有两种定时器,倒计时定时器 和 间隔定时器
倒计时定时器(延时器 延时执行一次)
倒计时多少时间以后执行函数
语法: setTimeout(要执行的函数,多长时间以后执行)
setTimeout(要执行的函数,多长时间以后执行)
会在你设定的时间以后,执行函数
时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
所以会在页面打开 1 秒钟以后执行函数
只执行一次,就不在执行了
返回值是,当前这个定时器是页面中的第几个定时器
间隔定时器
每间隔多少时间就执行一次函数
语法: setInterval(要执行的函数,间隔多少时间)
setInterval(要执行的函数,间隔多少时间)
时间和刚才一样,是按照毫秒进行计算的
每间隔 1 秒钟执行一次函数
只要不关闭,会一直执行
定时器的返回值
设置定时器的时候,他的返回值是部分 setTimeout 和 setInterval 的
setTimeout
setInterval
只要有一个定时器,那么就是一个数字
关闭定时器
我们刚才提到过一个 timerId,是表示这个定时器是页面上的第几个定时器
这个 timerId 就是用来关闭定时器的数字
我们有两个方法来关闭定时器 clearTimeout 和 clearInterval
clearTimeout
clearInterval
关闭以后,定时器就不会在执行了
关闭以后定时器就不会在执行了
原则上是
clearTimeout 关闭 setTimeout
clearInterval 关闭 setInterval
但是其实是可以通用的,他们可以混着使用
以上就是JS定时器的用法
网页端常用:requestAnimationFrame, setInterval, setIimeoutnode端常用:nextTick,setImmediate,setIimeout,setInterval
setIimeout,当时间达到后,有机会就执行setInterval,按照指定间隔后把回调函数加入任务队列,js会逐个执行setImmediate,任务队列执行完成后马上运行指定代码nextTick,生成更细颗粒度的任务加入微任务队列,微任务队列优先级高于普通任务队列,在两个队列都有值的情况下,优先执行微任务队列requestAnimationFrame,与setTimeout相比requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机,它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,常用于动画场景
✔网页端常用:requestAnimationFrame, setInterval, setIimeout
✔node端常用:nextTick,setImmediate,setIimeout,setInterval
Js给初学者的印象总是那么的杂而乱,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置...
看图:
基本类型( 6种 ):Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol ( 唯一 )
JavaScript 使网页增加互动性,使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。...
Number类型String类型Boolean类型Undefined类型Null类型
空格在ASCII中的值为32,空字符为0,可本人觉得不就是都是为空的吗,没有什么区别?char mychar1,mychar2;mychar1=' ';mychar2='\0';printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...
1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...
向一个对象数组里面添加新的属性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...
我觉得getTopWindow() 应该是他自己写的函数 mask 应该是getTopWindow()函数中 return 出的一个什么玩意show() jQuery的显示
看上图
如图所示
1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...
如图所示,最简单的选项卡思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示,所以...
1、js截取两个字符串之间的内容:123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容:123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......
如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.
最多设置5个标签!
setInterval: 以固定的时间间隔重复调用一个函数或者代码段
setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)
requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)
js的定时器有以下这些:
✔网页端常用:requestAnimationFrame, setInterval, setIimeout
✔node端常用:nextTick,setImmediate,setIimeout,setInterval
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。
一、什么是定时器
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下 setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段
setInterval: 以固定的时间间隔重复调用一个函数或者代码段
setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)
requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)
上面简单的介绍了四种JS的定时器,而本文将会主要介绍比较常用的两种:setTimeout和setInterval。
二、举个栗子
基本用法
setInterval 和 setTimeout的区别?
如果是setTimeout和setInterval的话,它俩仅仅在执行次数上有区别,setTimeout一次、setIntervaln次。 而通过setTimeout模拟的setInterval与setInterval的区别则在于:setTimeout只有在回调完成之后才会去调用下一次定时器,而setInterval则不管回调函数的执行情况,当到达规定时间就会在事件队列中插入一个执行回调的事件,所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响?
setTimeout(func, 0) 和 setImmediate(func)谁更快?(仅仅是好奇,才写的这段测试)
在Node.JS v6.7.0中测试发现setTimeout更早执行
面试题
下面代码运行后的结果是什么?
问题答案会在后面解答
三、JS定时器的工作原理
在解释上面问题的答案之前我们先来了解一下定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图。 上图中,左侧数字代表时间,单位毫秒;左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作;蓝色方块表示正在执行的代码块;右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下:
程序开始时,有一个JS代码块开始执行,执行时长约为18ms,在执行过程中有3个异步事件触发,其中包括一个setTimeout、鼠标点击事件、setInterval
第一个setTimeout先运行,延迟时间为10ms,稍后鼠标事件出现,浏览器在事件队列中插入点击的回调函数,稍后setInterval运行,10ms到达之后,setTimeout向事件队列中插入setTimeout的回调
当第一个代码块执行完成后,浏览器查看队列中有哪些事件在等待,他取出排在队列最前面的代码来执行
在浏览器处理鼠标点击回调时,setInterval再次检查到到达延迟时间,他将再次向事件队列中插入一个interval的回调,以后每隔指定的延迟时间之后都会向队列中插入一个回调
后面浏览器将在执行完当前队头的代码之后,将再次取出目前队头的事件来执行
这里只是对定时器的原理做一个简单版的描述,实际的处理过程比这个复杂。
四、题目答案
好啦,我们现在再来看看上面的面试题的答案。 第一题
第二题
第三题
五、需要注意的点
setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同
因为JS引擎只有一个线程,所以它将会强制异步事件排队执行
如果setInterval的回调执行时间长于指定的延迟,setInterval将无间隔的一个接一个执行
this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决
六、参考
MDN
How JavaScript Timers Work
JavaScript定时器与执行机制解析
javascript中一共有两个定时器:
1. setTimeout,单次定时器,在规定时间(以毫秒计)过后执行一次函数或计算一次表达式;
2. setInterval,循环定时器,每隔一段时间(以毫秒计)重复的执行一次函数或计算一次表达式。
在 js 里面,有两种定时器,倒计时定时器 和 间隔定时器
倒计时定时器(延时器 延时执行一次)
倒计时多少时间以后执行函数
语法:
setTimeout(要执行的函数,多长时间以后执行)
会在你设定的时间以后,执行函数
时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
所以会在页面打开 1 秒钟以后执行函数
只执行一次,就不在执行了
返回值是,当前这个定时器是页面中的第几个定时器
间隔定时器
每间隔多少时间就执行一次函数
语法:
setInterval(要执行的函数,间隔多少时间)
时间和刚才一样,是按照毫秒进行计算的
每间隔 1 秒钟执行一次函数
只要不关闭,会一直执行
返回值是,当前这个定时器是页面中的第几个定时器
定时器的返回值
设置定时器的时候,他的返回值是部分
setTimeout
和setInterval
的只要有一个定时器,那么就是一个数字
关闭定时器
我们刚才提到过一个 timerId,是表示这个定时器是页面上的第几个定时器
这个 timerId 就是用来关闭定时器的数字
我们有两个方法来关闭定时器
clearTimeout
和clearInterval
关闭以后,定时器就不会在执行了
关闭以后定时器就不会在执行了
原则上是
clearTimeout
关闭setTimeout
clearInterval
关闭setInterval
但是其实是可以通用的,他们可以混着使用
以上就是JS定时器的用法
网页端常用:requestAnimationFrame, setInterval, setIimeout
node端常用:nextTick,setImmediate,setIimeout,setInterval
网页端常用:requestAnimationFrame, setInterval, setIimeout
node端常用:nextTick,setImmediate,setIimeout,setInterval
setIimeout,当时间达到后,有机会就执行
setInterval,按照指定间隔后把回调函数加入任务队列,js会逐个执行
setImmediate,任务队列执行完成后马上运行指定代码
nextTick,生成更细颗粒度的任务加入微任务队列,微任务队列优先级高于普通任务队列,在两个队列都有值的情况下,优先执行微任务队列
requestAnimationFrame,与setTimeout相比requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机,它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,常用于动画场景
js的定时器有以下这些:
✔网页端常用:requestAnimationFrame, setInterval, setIimeout
✔node端常用:nextTick,setImmediate,setIimeout,setInterval
相关问题推荐
Js给初学者的印象总是那么的杂而乱,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置...
看图:
基本类型( 6种 ):Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol ( 唯一 )
JavaScript 使网页增加互动性,使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。...
Number类型String类型Boolean类型Undefined类型Null类型
空格在ASCII中的值为32,空字符为0,可本人觉得不就是都是为空的吗,没有什么区别?char mychar1,mychar2;mychar1=' ';mychar2='\0';printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...
1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...
向一个对象数组里面添加新的属性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...
我觉得getTopWindow() 应该是他自己写的函数 mask 应该是getTopWindow()函数中 return 出的一个什么玩意show() jQuery的显示
看上图
如图所示
1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...
如图所示,最简单的选项卡思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示,所以...
1、js截取两个字符串之间的内容:123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容:123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......
如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.