WN - window.setTimeout exekverar direkt... vet ej varför

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - window.setTimeout exekverar direkt... vet ej varför (https://www.wn.se/forum/showthread.php?t=1041716)

window.setTimeout exekverar direkt... vet ej varför

Jag försöker skapa ett memory. När två är öppna samtidigt ska de stängas igen efter två sekunder. För att man ska kunna öppna andra under tiden så får de en status "pending" så att de särskiljs. Såhär ser koden ut:

Kod:

        this.find('li div').addClass(hidden).click(function() {

        

        $(this).removeClass(hidden).addClass('open');

                

        function hideit(el) {

                el.removeClass('pending').addClass(hidden);

        }

        

        if($('.open').length>1) {

        var el = $('.open');

        el.removeClass('open').addClass('pending');

        window.setTimeout(hideit(el), 2000);

        }



        });

Problemet är hideit(el) exekveras direkt. Alltså resultatet blir korrekt, men den väntar inte i två sekunder. Någon som ser vad problemet kan bero på?

Testa att byta
window.setTimeout(hideit(el), 2000);
mot
window.setTimeout('hideit(el)', 2000);

Då händer ingenting :/

Här är sidan:
http://www.cekdahl.com/files/memory_plugin/

En gissning är att variabeln 'el' inte är definierad när funktionen hideit körs. Det är ju en lokalt definierad variabel på raden före setTimeout körs, alltså finns den inte definierad när hideit anropas 2000 ms senare.
Om du däremot kör hideit(el) utan fnuttar så evalueras ju uttrycket omedelbart på raden setTimeout(..), det är därför du upplever att bilden vänds tillbaka direkt. Dessutom ger det ju ett javascriptfel.

På följande sida kör man utan fnuttar när man använder funktioner:
https://developer.mozilla.org/en/DOM/window.setTimeout

Här är ett exempel på en kod som inte ger fel men som har fnuttar, och dessutom inte är beroende av någon variabel (den exekverar funktionen direkt):

Kod:

/*

 *

 *

 */

(function($) {

 

        $.fn.memorize = function(classes, hidden, q) {



        classes.sort(function() {return 0.5 - Math.random()});

        classes = classes.slice(0, 8);

        classes = classes.concat(classes);

        classes.sort(function() {return 0.5 - Math.random()});



        for(var i=0; i<q*2; i++) {

                this.prepend('<li><div class="'+classes[i]+'"></div></li>');

        };

        

        this.find('li div').addClass(hidden).click(function() {

        

        $(this).removeClass(hidden).addClass('open');

                

        function hideit(el) {

                el.removeClass('pending').addClass(hidden);

        }

        

        if($('.open').length>1) {

        var el = $('.pending');

        el.removeClass('open').addClass('pending');

        window.setTimeout("hideit($('.pending'))", 2000);

        }



        });

        

        

        

        return this;



        };

 

})(jQuery);

Citat:

Ursprungligen postat av Althalos (Inlägg 20352631)

Kod:

        this.find('li div').addClass(hidden).click(function() {

        

        $(this).removeClass(hidden).addClass('open');

                

        function hideit(el) {

                el.removeClass('pending').addClass(hidden);

        }

        

        if($('.open').length>1) {

        var el = $('.open');

        el.removeClass('open').addClass('pending');

        window.setTimeout(hideit(el), 2000);

        }



        });

Problemet är hideit(el) exekveras direkt. Alltså resultatet blir korrekt, men den väntar inte i två sekunder. Någon som ser vad problemet kan bero på?

hideit(el) kommer funktionen att köras eftersom du anropat funktionen med (..).
Vad du vill göra är att skicka med funktionen till setTimeout så den själv för köra funktionen. Finns två sätt:

Kod:

window.setTimeout(hideit, 2000);

Detta skickar funktionen till setTimeout, inte resultatet av funktionen. Problemet här är att du inte kan skicka med en parameter.

Kod:

window.setTimeout(function(){hideit(el),2000)});

Här skapar du en ny funktion som skickas med till setTimeout och den körs inte förrän setTimeout anropar den. Här kan du alltså skicka med parametrar.

Hoppas det hjälpte dig lite på traven :)