Two timeouts interrupt with each other

Question

So I tried adding a slideshow with setTimeout, but after adding it other function stopped working. I tried changing setTimeout to setInterval, but also it didn't work.
Here is my code:

    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;

[`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) is a function that takes a timeout id as a parameter. The timeout id is returned by [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) (whose overload taking a string is not recommended). — Heretic Monkey, Aug 08 '21 at 16:13
Also note that by using `window.onload = ` you are overwriting the onload handler. Use `addEventListener('load', function() { .... })` to add event listeners non-destructively. — Heretic Monkey, Aug 08 '21 at 16:16
I tried experimenting with clearTimeout and I have forgotten to remove it, edited post. — BrtSkr, Aug 08 '21 at 16:18
What is `.loaderWrap`? Can you create a runnable snippet that reproduces the issues you have? (Use the toolbar) — trincot, Aug 08 '21 at 16:22
Does this answer your question? [JavaScript event window.onload not triggered](https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered) — Heretic Monkey, Aug 08 '21 at 16:24
@trincot LoaderWrap is my styling for loading animation and after that specified time (1500) that element is removed. — BrtSkr, Aug 08 '21 at 16:32
But you said (in the title) the timeouts interfered. How? Does it concern that one? Can you edit your question and turn it into a runnable snippet, demonstrating the malfunctioning? — trincot, Aug 08 '21 at 16:35
Okay, I fixed it. I just used addEventListener as @HereticMonkey told and it works great, thanks for help! — BrtSkr, Aug 08 '21 at 16:56

score 0 · Accepted Answer · answered Aug 08 '21 at 17:09

You can't use window.onload multiple times, it'll override the previous value when you use it again, and will only execute the last function you assign to it. As a fix to that, you can use window.addEventListener('load', function(){}) this will allow you to stack as many event listeners as you need for the same element even if they are the same event type.

When using setTimeout() when passing a string javascript will automatically pass it to eval() and it will work, but in your case, you don't need to do that. you can simply pass the name of the function as an argument.

Instead of: setTimeout('changeImage()', 1000) Do: setTimeout(changeImage, 1000)

Your final code after refactoring will look something like:


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

Two timeouts interrupt with each other

1 Answers1