Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Помогите с задержкой(setinterval) условий...  [new]
KsOD
Member

Откуда:
Сообщений: 3
Вкратце, опишу проблему - возникла проблема с пониманием таких команд, как setinterval и settimeout.
Цель была сделать на условиях сделать задержку в 3 секунды, когда эти же условия ходят по циклу(for)... Фактически пример это и есть данный код, именно сейчас все работает, как предполагается, только данный способ меня не устраивает, ибо каждый раз цикл умножая на себя, увеличивает скорость задержки, хотелось бы уйти от данного ускорения.
Очень долго пытался уяснить куда поставить и что сделать, в итоге результат 0, решил обратится к более опытным людям, которые встречались с данной командой.
P.S. Заранее спасибо, прошу разъяснить данную команду и её особенность работы и прошу прощения, что нету комментариев, на данный момент добавить их не предоставляется возможным мне...

JS
+
    var image = new Array(4);

    image[0] = { 'small': "small-0", 'big': "big-0" };
    image[1] = { 'small': "small-1", 'big': "big-1" };
    image[2] = { 'small': "small-2", 'big': "big-2" };
    image[3] = { 'small': "small-3", 'big': "big-3" };
    image[4] = { 'small': "small-4", 'big': "big-4" };

    var active_image = 0;
    var last_image = 0;

    for (var i = 1; i < 100; i++) {
        setTimeout(function() {

            if (last_image == 0) {

                $("#slide-0").html(image[0].small);
                $("#slide-1").html(image[1].small);
                $("#slide-2").html(image[2].small);
                $("#slide-3").html(image[3].small);
                $("#slide-4").html(image[4].big);

                last_image = 4;
            } else {

                if (last_image == 4) {
                    $("#slide-1").html(image[last_image].small);
                    $("#slide-4").html(image[1].big);
                    last_image = 1;
                }

                if (last_image < 4) {
                    active_image = last_image + 1
                    $("#slide-" + active_image).html(image[last_image].small);
                    $("#slide-4").html(image[active_image].big);

                    if (active_image < 4) {
                        last_image = active_image;
                    } else {
                        $("#slide-0").html(image[0].small);
                        $("#slide-1").html(image[1].small);
                        $("#slide-2").html(image[2].small);
                        $("#slide-3").html(image[3].small);
                        $("#slide-4").html(image[4].big);

                        last_image = 4;
                    }
                }
            }
            console.log(i);
        }, 3000 * i);
    }

HTML
+
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>    
    <body>

     <div id="slide-0">0</div> 
     <div id="slide-1">1</div> 
     <div id="slide-2">2</div> 
     <div id="slide-3">3</div> 
     <div id="slide-4">4</div> 
    </body>
</html>
9 фев 19, 05:56    [21805047]     Ответить | Цитировать Сообщить модератору
 Re: Помогите с задержкой(setinterval) условий...  [new]
Лысый дядька
Member

Откуда:
Сообщений: 302
Вы, видимо, не понимаете, как работает асинхронный код. JS, асинхронный, это значит, что когда указатель команды доходит до вызова асинхронной функции - в нашем случае setTimeout - он не ожидает завершения этой функции, если в функции есть ожидание завершения внешнего процесса. Другими словами, основной поток не блокируется на вызове setTimeout, а продолжает последовательное выполнение программы, в вашем случае - тут же начинает новый цикл. Таким образом у вас будут сто таймаутов, которые ОДНОВРЕМЕННО ждут событие таймера, чтобы вызвать анонимную функцию.
9 фев 19, 08:25    [21805062]     Ответить | Цитировать Сообщить модератору
 Re: Помогите с задержкой(setinterval) условий...  [new]
Лысый дядька
Member

Откуда:
Сообщений: 302
var i = 0;
var loops = 100;
function doAfterTimeout(timeout){
	console.log("Do iteration ", i);
	if(i < loops) setTimeout(doAfterTimeout, (++i) * 1000);
}
doAfterTimeout(i);
9 фев 19, 08:34    [21805064]     Ответить | Цитировать Сообщить модератору
 Re: Помогите с задержкой(setinterval) условий...  [new]
KsOD
Member

Откуда:
Сообщений: 3
Лысый дядька,

Благодарю мужик, выручил... Да, я еще новичок в JS, поэтому не знал данной особенности, еще раз спасибо, все понял.
9 фев 19, 08:51    [21805070]     Ответить | Цитировать Сообщить модератору
 Re: Помогите с задержкой(setinterval) условий...  [new]
Програмёр
Member

Откуда: Москва
Сообщений: 2981
KsOD,

в новом стандарте js появились асинхронные функции. То есть можно написать анонимную функцию и заставить родителя подождать её выполнения.

(async function(){
    for (var i = 1; i < 100; i++) {
        await (function() {
            return new Promise(resolve => {
                setTimeout(() => {
                    // тут код, я пробовал с console.log(i)
                    resolve(i);
                }, 30*i)
            })
        })();
    }
})()


Обращаю внимание, что родительская функция должна быть асинхронной, иначе никто никого ждать не будет (оно кажется ошибкой на этапе компиляции ругнётся, хотя может и на этапе выполнения, не помню точно, лишь пару раз юзал такое)
9 фев 19, 16:31    [21805283]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить