7思妙想之js 实现for循环中的停顿
与朋友在实现一次的web端的展示时,遇到了一个问题。先贴出有问题的代码:
for(var i = 0; i < length; i++) {
// codes
settimeout(event, time); // 此处执行符合条件的动画或者事件
}
我们的构想是,代码在遇见settimeout时, 能够等待settimeout执行完,再继续执行。熟悉js的人肯定知道,上面的代码是不可能实现这个暂停的效果的。那么问题来了,如何实现在循环里的停顿呢?
一开始尝试用了最古老的方法,写了个sleep函数,但是实际的效果并不好。在这里贴出sleep的代码:
function sleep() {
var ft = new Date().getTime();
while (new Date().getTime() - ft < time) {}
}
实际效果不尽人意。当执行sleep时,你的event并不会按照你的预想执行,甚至出现动画执行到一半停止的情况。对这种情况牵扯到js单线程的问题,不在此处多言。有志之士可上网查之。
幸运的是,可行的方法还是有的。
在这里贴出鄙人的方法,可能其他的仁兄会有更好的解决方案,在这里仅做学习交流之用:
var i = 0;
var event = function() {
//codes
};
var Myfor = function() {
var event_action = false;
//codes
i++;
if (condition) {
event();
event_action = true;
}
if (event_action == true) { // 执行了事件
settimeout(Myfor, eventtimes) // 这里的eventtimes最好略大于执行event需要的时间。
}
else if (i <= length){
settimeout(Myfor, times) //这里的times可视需求而定。
}
};
Myfor();
这样也就实现了所谓循环里的停顿。