Problem with setTimeout

Hi.

I have this script:

var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){el.classList.remove('preloader');})

And I need a 2-second delay before removing the “preloader” class from the html. None of these two scripts work and I do not know why:

var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){setTimeout(function(el){ el.classList.remove('preloader') }, 2000);})
var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){setTimeout(el.classList.remove('preloader'), 2000);})

Thanks for any comment.

Wrap the entire two line block in the setTimeout instead.

1 Like

Like this;

setTimeout(var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){
el.classList.remove('preloader');
}), 2000);

It does not work either since the removal occurs instantly.

The file link is at the bottom of the html. But the result is the same when adding the code at the bottom of the page.

https://www.w3schools.com/jsref/met_win_settimeout.asp

1 Like

I know that tutorial.
Is it something wrong with the script or the removal cannot be delayed for some reason?

2 Likes

This does not work either:

setTimeout(function(){var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){
el.classList.remove('preloader');
}}, 2000);

You havent closed your foreach properly.

1 Like

Like this:

setTimeout(function(){var elements= document.querySelectorAll('.preloader');
elements.forEach(function(el){
el.classList.remove('preloader');
})}, 2000);

It does not work.

Hi,

“It doesn’t work” is not a very helpful statement :slight_smile: What exactly doesn’t work?

The code you posted is fine. This works as expected and the class name is removed.

<p class="preloader">Hello</p>

<script>
  setTimeout(function(){
    var elements= document.querySelectorAll('.preloader');
    elements.forEach(function(el){
      el.classList.remove('preloader');
    }
  )}, 2000);
</script>

Maybe something is wrong with your markup?

2 Likes

No, it wasn’t the markup, there was a problem in the js file. I have just fixed it and the script works.

Many thanks.

1 Like

By the way, as forEach is not supported by IE, there is other solution to remove the class in an id element:

setTimeout(function(){ 
var element = document.getElementById("yourId");
element.classList.remove("preloader");
}, 2000);

Obviosly there must be many other ways to do it, but I am not a js expert at all.

It should be.
See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Browser_compatibility

I’m guessing he’s going off of - https://caniuse.com/#search=foreach

Which is different?

1 Like

Ah. Good point.

1 Like

Yup. A Nodelist is an array-like object, but not actually an Array. That’s why you see things like:

const elements = [...document.querySelectorAll('.preloader')];

which turn it into an actual array that can be iterated over.

Here’s a simple enough polyfill though…

NodeList.prototype.forEach = NodeList.prototype.forEach || 
  Array.prototype.forEach
2 Likes