bu

Question

Bir tablonun hücrelerinde yineleme sırasında jquery .removeClass çağrılar arasında bir gecikme eklemek çalışıyorum, jquery.each ile çalışmıyor setTimeout. Hücreler setTimeout olmadan düzgün görüntülenir, ancak setTimeout ile kod kırılır. Neyi yanlış yapıyorum?

function reveal_board() { 
$("td").each(function() { 
    var t=setTimeout('$(this).removeClass("invisible")', 500); 
}); 
} 

Answer 1

bu deneyin:

function reveal_board() { 
    $("div").each(function(index) {   
     (function(that, i) { 
      var t = setTimeout(function() { 
       $(that).removeClass("invisible"); 
      }, 500 * i); 
     })(this, index); 
    }); 
} 

O setTimeout() bir dize geçmesine genellikle kötü bir uygulama olduğunu ve aynı zamanda o şekilde kullanırken herhangi bir değişken iletebilirsiniz sanmıyorum. Ben de bir kapatma bunu sardırırsın

that her zaman doğru eleman için geçerlidir ve yerine emin olmak için.

NiftyDude dizinde geçmek ve sırayla her öğeyi görüntüleyecek bu kullanmak isteyebilirsiniz söylediği gibi, rağmen. -

Çalışma örnek kapatılması gerekmez gibi http://jsfiddle.net/Cc5sG/

DÜZENLEME

görünüyor:

function reveal_board() { 
    $("div").each(function(index) {   
     var that = this; 
     var t = setTimeout(function() { 
      $(that).removeClass("invisible"); 
     }, 500 * index);   
    }); 
} 

http://jsfiddle.net/Cc5sG/1/

Answer 2

ilk şey öncelikle, setTimeout ilk argüman için dizeyi kullanmaktan kaçının hata ayıklamak daha kolaydır yerine olarak anon işlevini kullanın ve bakımını:

$("td").each(function() { 
    var $this = $(this); 
    var t=setTimeout(function() { 
     $this.removeClass("invisible") 
    }, 500); 
}); 

Ayrıca, ben gerçekten emin değilim ne (daha sonra sorunuzu güncelleştirmek ve cevabımı adapte edeceğiz) buraya ulaşmak için çalışıyoruz, ama bir başka sonra her td 500 ms den invisible sınıfını kaldırmak istiyorsanız, kullanabileceğiniz index:

$("td").each(function() { 
    var $this = $(this); 
    var t=setTimeout(function(index) { 
     $this.removeClass("invisible") 
    }, 500 * (index+1)); 
}); 

Answer 3

Sizin this küresel window işaret edilmektedir.

function reveal_board() { 
    $("td").each(function() { 
    $this = $(this); 
    var t=setTimeout(function(){$this.removeClass("invisible");}, 500); 
    }); 
} 

Answer 4

Eh, aynı sorunu yaşadım ve ben bu şekilde çözdüm ... Ama performanslar hakkında hiçbir fikrim yok ya da her neyse, onu kullandım çok kısa bir döngüde (maksimum 10 eleman) ve mükemmel bir şekilde çalıştı ... Bu arada bir sınıf eklemek için kullandım, böylece bir sınıfı kaldırmak için ne verdiğinizi anlatayım;).

Çalışıyor

var elements = $(".elements"); 
var timeout; 

elements.each(function(e){ 
    timeout = setTimeout(function(index) { 
     elements[elements.length-e-1].setAttribute('class', elements[elements.length-e-1].getAttribute('class')+' MY-NEW-CLASS'); 
    }, 500 * e); 
});