本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来JS的闭包与定时器,使用JS的闭包与定时器的注意事项有哪些,下面就是实战案例,一起来看一下。
什么是闭包? 有什么作用
闭包就是能够读取其他函数内部变量的函数。
作用:1.可以读取函数内部的变量2.让这些变量的值始终保持在内存中。
setTimeout 0 有什么作用
js运行是基于单线程的,意味着一段代码执行时,其他代码将进入队列等待,一旦线程有空闲就执行后续代码。如果代码中设定了一个setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但并不是立即执行,仍然要等待前面代码执行完毕(其实有个延时,具体是16ms还是4ms取决于浏览器)。所以setTimeout并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
代码
下面的代码输出多少?修改代码让fnArr[i]()输出 i。使用两种以上的方法
1 2 3 4 5 6 7 | var fnArr = [];
for ( var i = 0; i < 10; i ++) {
fnArr[i] = function (){
return i;
};
}
console.log( fnArr3 );
|
代码:
方法一:
1 2 3 4 5 6 7 8 9 10 11 | var fnArr = [];
for ( var i = 0; i < 10; i ++) {
fnArr[i] = ( function (){
var index = i;
var fn = function (){
return index
}
return fn
}());
}
console.log( fnArr3 );
|
方法二:
1 2 3 4 5 6 7 8 9 | var fnArr = [];
for ( var i = 0; i < 10; i ++) {
( function (n){
fnArr[i] = function (){
return n;
}
})(i)
};
console.log( fnArr3 )
|
使用闭包封装一个汽车对象,可以通过如下方式获取汽车状态
1 2 3 4 5 6 7 8 9 10 11 12 13 | var Car =
Car.setSpeed(30);
Car.getSpeed();
Car.accelerate();
Car.getSpeed();
Car.decelerate();
Car.decelerate();
Car.getSpeed();
Car.getStatus();
Car.decelerate();
Car.decelerate();
Car.getStatus();
|
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | var Car = ( function (){
var speed;
function setSpeed(n){
speed = n
}
function getSpeed(){
return console.log(speed);
}
function accelerate(){
speed +=10
return speed;
}
function decelerate(){
speed -=10
return speed;
}
function getStatus(){
return console.log(speed===0? 'stop' : 'running' );
}
return {
setSpeed:setSpeed,
getSpeed:getSpeed,
accelerate:accelerate,
decelerate:decelerate,
getStatus:getStatus,
}
}());
Car.setSpeed(30);
Car.getSpeed();
Car.accelerate();
Car.getSpeed();
Car.decelerate();
Car.decelerate();
Car.getSpeed();
Car.getStatus();
Car.decelerate();
Car.decelerate();
Car.getStatus();
Car.speed();
|
写一个函数使用setTimeout模拟setInterval的功能
代码:
1 2 3 4 5 6 7 8 | var i=0;
function intv(){
setTimeout( function (){
console.log(i++);
intv();
},1000);
}
intv();
|
写一个函数,计算setTimeout最小时间粒度
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function getmin(){
var i = 0;
var start = Date .now();
var clock = setTimeout( function (){
i++;
if (i === 1000){
clearTimeout(clock);
var end = Date .now();
console.log(( end -start)/i)
}
clock = setTimeout(arguments.callee,0)
},0)
}
getmin()
|
下面这段代码输出结果是? 为什么?
1 2 3 4 5 6 7 8 9 | var a = 1;
setTimeout( function (){
a = 2;
console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);
|
这段代码的输出结果为1;3;2,因为代码中设定了一个setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但并不是立即执行,仍然要等待前面代码执行完毕,所以要等代码全部执行完毕后才执行setTimeout(function(){a = 2;console.log(a);}, 0);。
阅读剩余部分
相关阅读 >>
javascript怎么设置radio
javascript如何实现定时跳转页面
javascript怎么删除行
cors跨域资源共享详细介绍(附代码)
pop()方法怎么用
javascript中table怎么删除行
vuex中映射的完整指南
javascript是基于对象的吗
javascript有没有二维数组
javascript array怎么删除某个元素
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JS的闭包与定时器