Utilisation de setTimeout pour ajouter et supprimer une classe

Question

Je souhaite ajouter et supprimer une classe à une div en fonction du temps. Il devrait ajouter une classe après 6 secondes et l'enlever après 4 secondes. J'ai essayé une implémentation de base. pourquoi n'est pas this de travail? Je suppose que le problème est deux setTimeouts ensemble comme ceci. Si je commente la deuxième ligne, la première fonctionne. Que se passe-t-il ici?

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

Quelqu'un peut-il me montrer comment je peux écrire une seule fonction qui fait les deux (ajouter et supprimer la classe) sur la base d'un paramètre delay?

Answer 1

Essayez ceci:

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

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

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

Answer 2

C'est probablement ce que vous voulez faire:

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>

Le premier délai d'attente exécute au bout de 6 secondes, ajoute une classe à la div et démarre un autre délai d'attente, Wich exécute au bout de 4 secondes et supprime la classe.