Comment résoudre Var hors de portée dans les appels setTimeout

Question

J'essaie d'appeler un setTimeout à partir d'un rappel setInterval:

function callback() 
{ 
    //assign myVar 
    var myVar = document.getElementById("givenID"); 
    //... 
    //now wait 2 secs then call some code that uses myVAr 
    setTimeout("myVar.innerHTML = 'TEST'", 2000); 
} 

setInterval("callback();", 10000); 

setInterval fonctionne comme prévu, mais l'appel setTimeout échoue. Je suppose que le problème est lié au fait que je référence une variable (myVar) qui n'est pas dans la portée.

Quelle est la meilleure façon de résoudre ce problème?

Answer 1

C'est un candidat idéal pour la fermeture:

setInterval(
    function() 
    { 
     var myVar = document.getElementById("givenID"); 
     setTimeout(
      function() 
      { 
       // myVar is available because the inner closure 
       // gets the outer closures scope 
       myVar.innerHTML = "Junk"; 
      },2000); 
    }, 10000); 

Votre problème est portée lié, et cela fonctionnerait autour de cela.

Answer 2

Exécutez-le dans Firefox et cochez Outils | Console d'erreur. Si setTimeout échoue, il peut vous indiquer pourquoi.

En outre, essayez de remplacer "someFunction();" par "alert('hi')" (sans point-virgule) et de voir si cela fonctionne. Si c'est le cas, le problème est considérablement réduit.

Answer 3

En plus pratique, essayez de ne pas utiliser des chaînes comme paramètres pour setTimeout et setInterval parce que invoqueront eval ... En utilisant le formulaire ci-dessous pourrait également ce problème plus facile à comprendre/debug:

setInterval(function() { 
    // do stuff 
    // ... 
    // now wait 2 secs then call someFunction 
    setTimeout(someFunction, 2000); 
}, 10000); 

Answer 4

J'ai eu un problème similaire. Le problème était que j'essayais d'appeler une méthode de l'intérieur à l'aide d'un setTimeout(). Quelque chose comme ça, QUI NE FONCTIONNE PAS POUR MOI:

function myObject() { 

    this.egoist = function() { 
     setTimeout('this.egoist()', 200); 
    } 

} 

myObject001 = new myObject(); 
myObject001.egoist(); 

Ce qui suit n'a pas non plus FONCTIONNE:

... setTimeout(egoist, 200); 
... setTimeout(egoist(), 200); 
... setTimeout(this.egoist, 200); 
... setTimeout(this.egoist(), 200); 
... setTimeout(function() { this.egoist() }, 200); 

La solution a consisté à utiliser() déclaration comme ceci:

function myObject() { 

    this.egoist = function() { 
     with (this) { setTimeout(function() { egoist() }, 200);} 
    } 

} 

myObject001 = new myObject(); 
myObject001.egoist(); 

Bien sûr, c'est un cycle sans fin, mais le point que je fais ici est différent.

Hope this helps :)