Problem with setTimeout

JavaScript
1

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.

2

Wrap the entire two line block in the setTimeout instead.

1 Like
3

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.

4
1 Like
5

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

6

…

2 Likes
7

This does not work either:

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

You havent closed your foreach properly.

1 Like
9

Like this:

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

It does not work.

10

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
11

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
12

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.

13

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

14

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

Which is different?

1 Like
15

Ah. Good point.

1 Like
16

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.

17

Here’s a simple enough polyfill though…

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.