Подождите, пока функция завершится, чтобы запустить другую функцию

Я столкнулся с проблемой, которая сводит меня с ума уже дней 10... По сути, у меня есть функция, которая срабатывает (handleText), и я хочу дождаться окончания этой функции, прежде чем запускать вторую (handleBackground).

Я пробовал отложенные и обещания, но я думаю, что плохо их понимаю, потому что не могу заставить его работать так, как я хочу.

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 start и handleBackground (моя вторая функция, которую я хочу запустить после завершения первой) срабатывают одновременно и не ждут завершения handleText.

Я хочу, чтобы handleText запускался и ждал, пока каждый цикл передаст класс каждому промежутку, созданному с помощью blast.js, прежде чем запускать handleBackground.

Может кто-то помочь мне с этим ? Всем хорошего дня :)

Позвоните handleBackground() в обратном вызове setTimeout().

Randy Casburn 04.07.2019 01:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
1
131
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Определите задержку вне вашей функции, и каждая итерация увеличивает задержку, чтобы следующая была случайным временем после последней.

var delay = 0;

blastedwords.each(function(index) {
    var min = 45, max = 100;
    delay += Math.floor(Math.random() * (max - min) + min);
    var that = $(this);
    var t = setTimeout(function() {
        $(that).addClass("test");
    }, delay * index);
});
Ответ принят как подходящий

Я бы рекомендовал настроить глобальную переменную общее время, которую вы можете использовать для суммирования индивидуальных задержек. Таким образом, вы можете использовать другой setTimeout для вызова функции handleBackground() после прохождения totalTime.

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

Какая гениальная идея! Почему я никогда не думал об этом... Это сработало как шарм, спасибо :)

kkqe 04.07.2019 09:28

Хе-хе, спасибо за добрые слова kkqe - рад, что смог помочь!

obscure 04.07.2019 12:57

Другие вопросы по теме