javascript - 等到函数完成运行另一个函数

Question

我遇到了一个让我发疯大约 10 天的问题...基本上我有一个函数可以触发(handleText)，我想在该函数结束之前等待运行第二个(handleBackground)。

我尝试过 deferred 和 promises，但我觉得我不太了解它们，因为我无法让它按我想要的方式工作。

function handleText(){
    //BLAST INIT    
    var blastedwords = $('.baselineHeader').blast({
        delimiter: 'word',
    });

    //SHUFFLE ORDER IN ARRAY
    blastedwords = shuffleAds( blastedwords);
    function shuffleAds(arr){
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    }

    //ADD CLASS TO SPAN CREATED WITH BLAST WITH A RANDOM DELAY
    blastedwords.each(function(index) {
        var min = 45, max = 100;
        var delay = Math.floor(Math.random() * (max - min) + min);
        var that = $(this);
        var t = setTimeout(function() {
            $(that).addClass("test");
        }, delay * index);
    });
}

function handleBackground(){
    $('.baselineHeader').addClass('processed');
}

handleText();
handleBackground();

现在，handleText 开始，handleBackground(我想在第一个函数完成后运行的第二个函数)同时触发，但没有等待 handleText 完成。

我希望 handleText 运行并等待每个循环为使用 blast.js 创建的每个跨度分配类，然后再运行 handleBackground。

有人可以帮我解决这个问题吗？祝大家有美好的一天:)

Answer 1

我建议设置一个全局变量 totalTime，您可以使用它来累加个别延迟。这样你就可以在 totalTime 过去后使用另一个 setTimeout 来调用函数 handleBackground()。

var totalTime = 0;
blastedwords.each(function(index) {
  var min = 45,
    max = 100;
  var delay = Math.floor(Math.random() * (max - min) + min) * index;
  totalTime += delay;
  var that = $(this);
  var t = setTimeout(function() {
    $(that).addClass("test");
  }, delay);
});
setTimeout(handleBackground, totalTime);