7思妙想之Js 实现for循环中的停顿

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();

这样也就实现了所谓循环里的停顿。

真是一次奇妙的体验。