Как сделать коллбэк функцию?

Question

[Vasya-prijevalskij]

Всем привет. Не могу разобраться как работают коллбэк функции. Пытаюсь реализовать ее на реальном примере, но ничего не выходит.
Подскажите плз, как это работает. Допустим у меня на сайте есть прелоадер, который, очевидно грузиться в самом начале:

let images = document.images,
      imagesTotalCount = images.length,
      imagesLoadedCount = 0;
    
            for(let i = 0; i < imagesTotalCount; i++) {
                imageClone = new Image();
                imageClone.onload = imageLoaded;
                imageClone.onerror = imageLoaded;
                imageClone.src = images[i].src;
            }
    
            function imageLoaded() {
                imagesLoadedCount++;
                if(imagesLoadedCount >= imagesTotalCount) {
                    setTimeout (function () {
                        if(!preloader.classList.contains('done')) {
                            preloader.classList.add('done');
                        }
                    }, 1000);
                }
            }

А также есть вебпак модули, которые необходимо запустить, после того, как скроется прелоадер, т.к. в модулях анимационный скрипт лежит, который во время показа прелоадера запускаться не должен:

let vars = require('./modules/vars'),
 anim = require('./modules/anim'),
 slider = require('./modules/slider');

 vars();
 anim();
 slider();

Как мне используя коллбэк функцию, запустить сначала мой преоадер, а затем как выполнится условие в прелоадере if(!preloader.classList.contains('done')) запустить модули? Меня интересует как можно это сделать исключительно коллбэком, потому что я не до конца понимаю, как они работают. Понимаю, что вариантов есть масса для выполнения моей задачи. Но меня пока интересует только коллбэк.
Заранее большое спасибо за помощь!

Comments

[imko]

Мне кажется пихать все в колбэк не очень хорошая идея, попробуй сделать так чтоб прелоадер генерировал по завершении свое событие,а эти ребята его слушали

[Vasya-prijevalskij]

Понял, спасибо!

Answer 1

[historydev]

function try_callback(a, b, callback) {
	return callback(a, b)
}

function plus(a, b) {
	return a + b
}

console.log(try_callback(1, 1, plus))

Answer 2

[Сергей Соколов]

Колбэки и так уже используются: вот тут imageClone.onload = imageLoaded;

Некую функцию (колбэк == "callback" == "перезвоните сюда позже") передали, чтобы её вызвали позже. Когда наступит событие onLoad у этого клона картинки.

Как-то так попробуйте:

function nextActions() {
  vars();
  anim();
  slider();
}

// ... 

// внутри колбэка imageLoaded:
if (!preloader.classList.contains('done')) {
  preloader.classList.add('done');
  nextActions(); // запустить следующие анимации
}

Answer 3

[Nik Faraday]

https://developer.mozilla.org/ru/docs/Glossary/Cal...