Using setTimeout to Add and remove class

Question

I want to add and remove a class to a div on the basis of time. It should add a class after 6 secs and remove it after 4 secs. I tried a basic implementation. why isn't this working? I assume the problem is two setTimeouts together like this. If I comment out the second line the first one works. What is happening here?

setTimeout(addHighlight(), 6000);
setTimeout(removeHighlight(), 10000);

Can somebody show me how i can write a single function that does both(add and remove class) on the basis of a delay parameter?

Try `setTimeout(function() { addHighlight(); setTimeout(function() { removeHighlight() }, 4000) }, 6000);` — Abhi, May 26 '17 at 08:18

score 7 · Accepted Answer · edited May 26 '17 at 14:44

7

Try this:

setTimeout(function() {
  $('#square').addClass('highlight');
}, 6000);

setTimeout(function() {
  $('#square').removeClass('highlight');
}, 10000);

https://jsfiddle.net/js6wh78h/8/

edited May 26 '17 at 14:44

Rory McCrossan

331,213
40
305
339

answered May 26 '17 at 08:11

Trimantra Software Solution

3,223
2
25
44

Why doesn't my code work? It is basically the same. I have defined `function(){ $('#square').addClass('highlight'); }` as `addHighlight` and called like this` setTimeout(addHighlight(), 6000);` – anoop chandran May 26 '17 at 08:22
Replace your setTimeout(addHighlight(), 6000); to setTimeout(addHighlight, 6000); In both setTimeout function – Trimantra Software Solution May 26 '17 at 08:28
I see what I've done, Thank you for pointing that out. it was a deal-breaker. – anoop chandran May 26 '17 at 09:17

Robert · Answer 2 · 2017-05-26T08:21:14.510

-2

This is probably what you want to do:

setTimeout(function(){
  $("#test").addClass('on');
  
  setTimeout(function(){
     $("#test").removeClass('on');
  }, 4000);
}, 6000);

.on {
  background: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">hello world</div>

The first timeout executes after 6 seconds, adds a class to the div and starts another timeout, wich executes after 4 seconds and removes the class.

edited May 26 '17 at 08:21

answered May 26 '17 at 08:11

Robert

426
1
4
11

Why is this answer downvoted? This answer tried to club both functionalities together in one as I required. – anoop chandran May 26 '17 at 08:19
@anoopchandran probably because the first version wasn't using jquery. I added it afterwards. – Robert May 26 '17 at 08:21

Using setTimeout to Add and remove class

2 Answers2