Как сделать поочередное срабатывание функций на jquery?

Question

[Злой Негр]

Ребят, добрый вечер! Столкнулся еще довольно давно впервые с такой проблемой. Казалось бы - все в теории элементарно, на деле - запутался.

Задача предельно простая: Просто повторять бесконечно, скажем 3 действия на jquery. К примеру просто менять картинки по очереди, каждые 3 сек.

К примеру, хочу задавать блоку разные значения background, которые заданы у меня, по кругу, бесконечно. Вот я задаю первый background:
$('.banner').css('background' , '/img/1.png');
Ну и, собственно, еще таких 2, только с 2.png и 3.png.

Я хотел это сделать по началу на callback, объясню:
Задаю 3 функции, каждая отвечает за то, чтобы задать свое изображение, и вот по окончанию одной функции срабатывает другая, а когда завершается последняя - срабатывает первая. И вот, собственно и будет мое повторение. На деле, я вообще запутался, как это можно сделать.

Подскажите пожалуйста, кому не сложно.

Answer 1

[Stalker_RED]

let taskList = [f1, f2, f3] // список задач, любой длины
let delay = 1500 // 1.5 sec - интервал между задачами
let index = 0 // старотовая задача с которой начинается счет

setInterval(function(){
  if (index >= taskList.length) index = 0 // если дошли до конца списка - начнем с начала
  taskList[index++]() // запуск задачи
}, delay)





function f1() {
  console.log('function one')
}
function f2() {
  console.log('second function')
}
function f3() {
  console.log('third')
}

Answer 2

[profesor08]

Тебе нужен список картинок в виде массива и чуть чуть магии (остаток от деления счетчика на кол-во картинок это твой индекс в массиве):

let images = [
  "image1.png",
  "image2.png",
  "image3.png",
  "image434.png",
];

let counter = 0;

setInterval(function() {
  $(".banner").css("background" , images[counter % images.length]);
}, 3000);