SetTimeout et problème de fonction anonyme

C'est mon code, SetOpacity se invoquée par les fausses valeurs, pourquoi?

function SetOpacity(eID, opacity){                  
   eID.style.opacity = opacity / 100;
   eID.style.filter = 'alpha(opacity=' + opacity + ')';
}
function fade(eID, startOpacity, endOpacity){           
    var timer = 0;
    if (startOpacity < endOpacity) { 
       for (var i = startOpacity; i <= endOpacity; i++) {
           setTimeout(function() {SetOpacity(eID, i);}, timer * 30);
           timer++;
        }
    }           
}

source d'informationauteur ronik

  1. 42

    Cela devrait fonctionner:

    for (var i = startOpacity; i <= endOpacity; i++) {
    (function(opacity) {
        setTimeout(function() {SetOpacity(eID, opacity);}, timer * 30);
    })(i);
    timer++;
}

    Cela fonctionne comme suit:

    • à l'intérieur de la boucle de vous créer fonction anonyme (function(...){...}) et appeler immédiatement avec paramètre (c'est pourquoi il y a des parenthèses autour de function(){}de sorte que vous pouvez l'appeler l'ajout de () à la fin et de passer des paramètres)
    • paramètres passés à cette fonction anonyme (i valeur, qui est opacity à l'intérieur de la fonction) sont locales à cette fonction anonyme, de sorte qu'ils ne changent pas lors des prochaines étapes de la boucle, et vous pouvez safelly passer à une autre fonction anonyme (ce à setTimeout)

    Votre version d'origine n'a pas fonctionné, parce qu':

    • votre fonction transmise à setTimeout contient la référence à la variable i (pas la valeur de celui-ci), et il obtient la valeur lorsque cette fonction est appelée, ce qui n'est pas au moment de l'ajouter à setTimeout
    • la valeur de cette variable est modifiée dans la boucle, et avant de vous même obtenir de première setTimeout il obtient endOpacity valeur (dernière valeur de for boucle)

    Malheureusement JavaScript a seulement la fonction de la portée, de sorte qu'il ne fonctionnera pas si vous créer une variable à l'intérieur de la boucle et de leur attribuer de nouvelles valeur réelle, parce que chaque fois qu'il y a quelques var à l'intérieur de la fonction, ces variables sont créées au moment de l'exécution de la fonction (et obtenir undefined valeur par défaut). Le seul moyen (facile) pour créer un nouveau champ d'application est de créer de la fonction (peut être anonyme) et de créer de nouvelles variables à l'intérieur d'eux (les paramètres sont des variables trop)

  2. 5

    C'est une clôture question. Par le temps d'exécution de la fonction, i est déjà à endOpacity. Ce sera le travail, par la création d'une autre fermeture:

    function SetOpacityTimeout(eID, opacity, timer){
  setTimeout(function() {SetOpacity(eID, opacity);}, timer * 30);
}

function fade(eID, startOpacity, endOpacity){           
    var timer = 0;
    if (startOpacity < endOpacity) {
       for (var i = startOpacity; i <= endOpacity; i++) {
          SetOpacityTimeout(eID,i,timer);
          timer++;
        }
    }           
}
  3. 1

    Kobi a la bonne idée sur le problème. Je vous suggère d'utiliser un intervalle au lieu de cela, cependant.

    Voici un exemple: (Votre SetOpacity fonction reste la même, je l'ai laissée ici.)

    function fade(eID, startOpacity, endOpacity){
    var opacity = startOpacity;
    SetOpacity(eID, opacity);

    var interval = window.setInterval(function(){
        opacity++;
        SetOpacity(eID, opacity);

        //Stop the interval when done
        if (opacity === endOpacity)
            window.clearInterval(interval);
    }, 30);
}
  4. 1

    C'est suis l'exemple que j'ai utilisé avec jquery. "menuitem" est le itemclass et jquery vérifie la "recentlyOut" classe pour voir si elle a besoin de faire glisser.

    Le code parle de lui-même. 

    $(".menuitem").mouseenter(
function(){
    $(this).addClass("over").removeClass("out").removeClass("recentlyOut");
    $(this).children(".sub").slideDown();
}); 
    $(".menuitem").mouseleave(
function(){

    $(this).addClass("out").addClass("recentlyOut").removeClass("over");
    setTimeout(function()
        {
            var bool = $(".recentlyOut").hasClass("over");
            if (!bool)
            {
    $(".recentlyOut").removeClass("recentlyOut").children(".sub").slideUp();
            }
        }
    , 400);
}
    );