Два тайм-аута прерываются друг другом

avatar
BrtSkr
8 августа 2021 в 16:10
53
1
0

Поэтому я попытался добавить слайд-шоу с помощью setTimeout, но после его добавления другая функция перестала работать. Я попытался изменить setTimeout на setInterval, но это тоже не сработало.
Вот мой код: 

    window.onload = function () {
    setTimeout(function () {
        let x = document.querySelector('.loaderWrap')
        x.remove();
    }, 1500)
}

let i = 0;
let images = [];


images[0] = ''
images[1] = ''
images[2] = ''

 function changeImage() {  
    document.slide.src = images[i];
    if(i<images.length - 1){
        i++;
    }else{
        i=0;
    }
    setTimeout('changeImage()', 1000);
    document.querySelector('.prev').onclick = function () {
        if(i>0){
            i--;
        }
    }
}window.onload = changeImage;
Источник
Heretic Monkey
8 августа 2021 в 16:13
0

clearTimeout — это функция, которая принимает идентификатор времени ожидания в качестве параметра. Идентификатор времени ожидания возвращается setTimeout (чья перегрузка принимает строку не рекомендуется).

Heretic Monkey
8 августа 2021 в 16:16
1

Также обратите внимание, что при использовании window.onload = вы перезаписываете обработчик загрузки. Используйте addEventListener('load', function() { .... }) для неразрушающего добавления прослушивателей событий.

BrtSkr
8 августа 2021 в 16:18
0

Я пробовал экспериментировать с clearTimeout и забыл удалить его, отредактировал сообщение.

trincot
8 августа 2021 в 16:22
0

Что такое .loaderWrap? Можете ли вы создать исполняемый фрагмент кода, воспроизводящий ваши проблемы? (Используйте панель инструментов)

Heretic Monkey
8 августа 2021 в 16:24
0

Отвечает ли это на ваш вопрос? Событие JavaScript window.onload не запущено

BrtSkr
8 августа 2021 в 16:32
0

@trincot LoaderWrap — это мой стиль для загрузки анимации, и по истечении указанного времени (1500) этот элемент удаляется.

trincot
8 августа 2021 в 16:35
0

Но вы сказали (в заголовке) таймауты мешали. Как? Это касается того? Можете ли вы отредактировать свой вопрос и превратить его в исполняемый фрагмент, демонстрирующий неисправность?

BrtSkr
8 августа 2021 в 16:56
0

Хорошо, я исправил это. Я только что использовал addEventListener, как сказал @HereticMonkey, и он отлично работает, спасибо за помощь!

Ответы (1)

avatar
Abd Elbeltaji
8 августа 2021 в 17:09
0

Вы не можете использовать window.onload несколько раз, оно переопределит предыдущее значение при повторном использовании и будет выполнять только последнюю назначенную ему функцию. В качестве исправления этого вы можете использовать window.addEventListener('load', function(){}), это позволит вам складывать столько прослушивателей событий, сколько вам нужно для одного и того же элемента, даже если они относятся к одному и тому же типу событий.

При использовании setTimeout() при передаче строки javascript автоматически передаст ее в eval() и все будет работать, но в вашем случае этого делать не нужно. вы можете просто передать имя функции в качестве аргумента.

Вместо: setTimeout('changeImage()', 1000) Сделать: setTimeout(changeImage, 1000)

Ваш окончательный код после рефакторинга будет выглядеть примерно так:


window.addEventListener('load', function () {
  setTimeout(function () {
    let x = document.querySelector('.loaderWrap');
    x.remove();
  }, 1500);
});

let i = 0;
let images = [];

images[0] = '';
images[1] = '';
images[2] = '';

function changeImage() {
  document.slide.src = images[i]
  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  setTimeout(changeImage, 1000)
  document.querySelector('.prev').onclick = function () {
    if (i > 0) {
      i--;
    }
  }
}
window.addEventListener('load', changeImage);