在setTimeout()内的$ .each之后运行函数

时间:2015-05-27 12:09:22

标签: javascript jquery

我很讨厌,我有一个setTimeout(),它有一个$ .each函数,每隔5秒为每个滑块设置一个动画。 (这是因为$ .each函数中的另一个setTimeout()而发生的。

  

现在我想知道如何在运行 populateGraph()函数之后   setTimeout和$ .each完成后,我尝试了以下但是   它同时运行

setTimeout(function() {
    $.each(data, function(i, v) {
        setTimeout(function() {
            $(".slider#" + v.id).slider("value", globalcoachscores[i]);
        }, 500 + (500 * i));
    });
    populateGraph();
}, 500);

谢谢!

6 个答案:

答案 0 :(得分:2)

你在最后 setTimeout电话后拨打populateGraph(),诀窍是,知道哪一个是你的最后一个:

setTimeout(function() {
    var currentCount = data.length;
    $.each(data, function(i, v) {
        setTimeout(function() {
            $(".slider#" + v.id).slider("value", globalcoachscores[i]);

            //decrease currentCount by one
            currentCount--;

            //if currentCount is at 0, then we know we've completed the last setTimeout
            if(!currentCount) {
              populateGraph();
            }
        }, 500 + (500 * i));
    });

}, 500);

答案 1 :(得分:2)

试试这个:

setTimeout(function() {
    var d= $.Deferred();
    var c=data.length;
    $.each(data, function(i, v) {
        setTimeout(function() {
            $(".slider#" + v.id).slider("value", globalcoachscores[i]);

         if (i+1==c)   d.resolve();
        }, 500 + (500 * i));
    });

    d.done(function () {
        populateGraph();
    });
}, 500);

答案 2 :(得分:1)

我认为,您需要使用$.Deferred(),就像这样

$('#yourTable').DataTable().row($(tr)).remove().draw(false);

答案 3 :(得分:1)

只计划在最后一个之后500毫秒?

setTimeout(function() {
    $.each(data, function(i, v) {
        setTimeout(function() {
            $(".slider#" + v.id).slider("value", globalcoachscores[i]);
        }, 500 * i);
    });
    setTimeout(populateGraph, 500 * data.length);
}, 500);

答案 4 :(得分:0)

似乎你需要一个发射器来帮助你...

setTimeout(function() {
    var emitter = new SuperEmitter(),//Create new super emitter
        emittors = [];
    $.each(data, function(i, v) {
        emittors.push(v.id);//Collect all emittors that populateGraph() should wait
        setTimeout(function() {
            $(".slider#" + v.id).slider("value", globalcoachscores[i]);
            emitter.emit(v.id);//Emit emittor when one job is done
        }, 500 + (500 * i));
    });
    emitter.on(emittors,function(){
        populateGraph();
    });//Set event job after all the jobs are done
}, 500);

这是我的SuperEmitter构造函数:

// Super Emitter
/**
 * Create a super emitter
 *
 * @constructor
 * @param {String} name - The name of the emitter.
 * @author Maplemx(Maplemx@gmail.com)
 */
function SuperEmitter(name){
    var waitors = [],
        emittors = {};

    function tryEmittor(emittor,data){
        if (emittors[emittor]){
            data = mergeObjects(emittors[emittor],data);
        }
        for (var i = 0;i < waitors.length;i++){
            if (waitors[i]){
                var emittorIndex = waitors[i].wait.indexOf(emittor);
                if (emittorIndex > -1){
                    waitors[i].wait.splice(emittorIndex,1);
                    waitors[i].data = mergeObjects(waitors[i].data,data);
                }
                if (waitors[i].wait.length === 0){
                    waitors[i].func(waitors[i].data);
                    waitors[i] = undefined;
                }
            }
        }
    }
    function tryWaitors(waitorId){
        if (waitors[waitorId]){
            for (var emittor in emittors){
                var emittorIndex = waitors[waitorId].wait.indexOf(emittor);
                if (emittorIndex > -1){
                    waitors[waitorId].wait.splice(emittorIndex,1);
                    waitors[waitorId].data = mergeObjects(waitors[waitorId].data,emittors[emittor]);
                }
                if (waitors[waitorId].wait.length === 0){
                    waitors[waitorId].func(waitors[waitorId].data);
                    waitors[waitorId] = undefined;
                    break;
                }
            }
        }
    }

    /**
     * Set new function into wait list
     * 
     * @public
     * @param {Array|*} emittors - The emittor(s) that the function wait for.(If emittor is not an Array, will turn it to an Array)
     * @param {Function} func - The function todo when emittor is sent.
     * @param {Object} [data] - The data want to send to the function.
     */
    this.on = function on(emittors,func,data){
        if (!(emittors instanceof Array)){emittors = [emittors];}
        var waitorId = waitors.push({
            wait: emittors,
            func: func,
            data: data,
        }) - 1;
        tryWaitors(waitorId);
    }

    /**
     * Send an emittor
     *
     * @public
     * @param {*} emittor - The emittor to be sent.
     * @param {Object} [data] - The data want to send to the functions which are waiting for the emittor.(The data here have higher priority than the data given when functions are put into wait list.)
     * @param {Boolean} [stay=true] - Tell if you want the emittor stay in memory, so that functions which are put into wait list later than emittor which are sent can also be activated by those emittor. If "stay" is true, you have to "unemit" the emittor manual.
     */
    this.emit = function emit(emittor,data,stay){
        if (typeof(stay) === 'undefined'){stay = true;}
        if (stay){
            emittors[emittor] = data;
        }
        tryEmittor(emittor,data);
    }

    /**
     * Erase an emittor (If "stay" is set false when emittor is sent, you don't need to erase it, because the emittor was not saved in memory)
     *
     * @public
     * @param {*} emittor - The emittor to be erased.
     */
    this.unemit = function unemit(emittor){
        if (emittors[emittor]){
            delete emittors[emittor];
        }
    }
}

答案 5 :(得分:0)

我建议在这里使用Q promise库:

var promise = Q();
$.each(data, function(i, v) {
    // since we construct this out of a .then callback, it's relative
    // to when this setup loop ran, not to the previous iteration
    var delay_until = Q.delay(500*i);

    // add to the promise chain
    promise = promise.then(function() {
        return delay_until;
    }).then(function() {
        $(".slider#" + v.id).slider("value", globalcoachscores[i]);
    });
});
promise.then(populateGraph);

通过设置我在这里完成的延迟,你可以获得两全其美的效果:

  • 如果某些内容导致页面滞后,它会赶上,而不是添加到总动画时间
  • 由于链必须按顺序执行
  • ,动画的顺序仍然保证是正确的