2010-01-25 13 views
63

Je dois exécuter un morceau de code JavaScript dis, chaque 2000 millisecondes.Temporisateur de boucle en JavaScript

setTimeout('moveItem()',2000) 

Ce qui précède exécutera une fonction après 2000 millisecondes, mais ne l'exécutera pas à nouveau.

donc dans ma fonction moveItem J'ai:

function moveItem() { 
    jQuery(".stripTransmitter ul li a").trigger('click'); 
    setInterval('moverItem()',2000); 
} 

Cela ne fonctionne pas parce que je veux exécuter la gâchette cliquez morceau jQuery de code à chaque intervalle de 2000 millisecondes, mais il est en ce moment étant appelé tous les temps et le script doit être interrompu. En plus de ça, je pense que c'est un codage de très mauvaise qualité ... Comment les gars résoudriez-vous ça?

+0

quand le script doit être interrompu? – Natrium

+1

Salut, je ne l'interromprai jamais. –

Répondre

175

Notez que setTimeout et setInterval sont des fonctions très différentes:

  • setTimeout exécutera le code une fois, après le délai d'attente.
  • setInterval exécutera le code pour toujours, à intervalles du délai d'attente fourni.

Les deux fonctions renvoient un code d'horloge que vous pouvez utiliser pour annuler le délai d'attente. Tout ce que vous avez à faire est de stocker cette valeur dans une variable et l'utiliser comme argument à clearTimeout(tid) ou clearInterval(tid) respectivement.

Ainsi, selon ce que vous voulez faire, vous avez deux choix valides:

// set timeout 
var tid = setTimeout(mycode, 2000); 
function mycode() { 
    // do some stuff... 
    tid = setTimeout(mycode, 2000); // repeat myself 
} 
function abortTimer() { // to be called when you want to stop the timer 
    clearTimeout(tid); 
} 

ou

// set interval 
var tid = setInterval(mycode, 2000); 
function mycode() { 
    // do some stuff... 
    // no need to recall the function (it's an interval, it'll loop forever) 
} 
function abortTimer() { // to be called when you want to stop the timer 
    clearInterval(tid); 
} 

Les deux sont très moyens communs d'atteindre le même.

+0

Aller avec le premier. C'est mieux. Juste avoir la fonction timeout créer un nouvel appel de timeout à lui-même. – a432511

+0

Hey, Miguel, merci, cela a résolu le problème, et c'était si simple, je me sens un peu ridicule ... –

+2

Vous me faites comprendre évidemment entre 'setTimeout' et' setInterval ', Merci @Miguel Ventura –

6
setInterval(moveItem, 2000); 

est la façon d'exécuter la fonction moveItem toutes les 2 secondes. Le principal problème dans votre code est que vous appelez setInterval à l'intérieur du rappel, plutôt qu'en dehors de celui-ci. Si je comprends ce que vous essayez de faire, vous pouvez utiliser ceci:

function moveItem() { 
    jQuery('.stripTransmitter ul li a').trigger('click'); 
} 

setInterval(moveItem, 2000); 

NB: Ne pas passer des chaînes à setTimeout ou setInterval - meilleure pratique consiste à passer une fonction anonyme ou un identifiant de fonction (comme je fait ci-dessus). Veillez également à ne pas mélanger des guillemets simples et doubles. Choisissez en un et gardez le.

-3

Vous devriez essayer quelque chose comme ceci:

function update(){ 
    i++; 
    document.getElementById('tekst').innerHTML = i; 
    setInterval(update(),1000); 
    } 

Cela signifie que vous devez créer une fonction dans laquelle vous faites les choses que vous devez faire, et assurez-vous qu'il s'appellera avec un intervalle que vous aimez. Dans votre onload corps appeler la fonction pour la première fois comme ceci:

<body onload="update()"> 
+1

Le code est cassé. Vous passez 'undefined' à setInterval et appelez récursivement' update() 'pour toujours sans aucune pause. (indice: la valeur de retour de update() est ce que vous passez à setInterval ici) – slebetman

+1

-1 vous créez un nouvel intervalle répétitif chaque fois que vous appelez cette fonction .. c'est tout à fait faux .. et a le même problème que l'OP demande aide pour .. –

2

Il devrait être:

function moveItem() { 
    jQuery(".stripTransmitter ul li a").trigger('click'); 
} 
setInterval(moveItem,2000); 

setInterval(f, t) appelle la fonction de la discussion, f, une fois tous les t millisecondes.

0

Voici la fonction de boucle automatique avec le code html. J'espère que cela peut être utile pour quelqu'un.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
position: relative; 
background-color: #abc; 
width: 40px; 
height: 40px; 
float: left; 
margin: 5px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<p><button id="go">Run »</button></p> 
<div class="block"></div> 
<script> 

function test() { 
$(".block").animate({left: "+=50", opacity: 1}, 500); 
    setTimeout(mycode, 2000); 
}; 
$("#go").click(function(){ 
test(); 
}); 
</script> 
</body> 
</html> 

Fiddle: DEMO