setTimeout không hoạt động với jquery.each, điều này

Question

Tôi đang cố thêm thời gian trễ giữa các cuộc gọi jquery .removeClass trong khi lặp qua các ô của bảng. Các ô hiển thị chính xác mà không có setTimeout, nhưng với setTimeout, ngắt mã. Tôi đang làm gì sai?

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

Answer 1

Hãy thử điều này:

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

Nó thường là một thói quen xấu để vượt qua một chuỗi để setTimeout() và tôi cũng không nghĩ rằng bạn có thể vượt qua bất kỳ biến khi sử dụng nó theo cách đó.

Tôi cũng đã đóng nó trong một bao đóng để đảm bảo rằng that luôn áp dụng cho phần tử phù hợp và không được thay thế.

Mặc dù, như NiftyDude nói bạn có thể muốn chuyển vào chỉ mục và sử dụng nó để hiển thị từng phần tử lần lượt.

dụ làm việc - http://jsfiddle.net/Cc5sG/

EDIT

Hình như bạn không cần đóng cửa:

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

Điều đầu tiên đầu tiên, tránh sử dụng chuỗi cho đối số đầu tiên của setTimeout, sử dụng chức năng anon thay vì nó dễ dàng hơn để gỡ lỗi và duy trì:

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

Ngoài ra, tôi không thực sự chắc chắn những gì bạn đang cố gắng để đạt được ở đây (cập nhật câu hỏi của bạn sau này và tôi sẽ thích nghi với câu trả lời của tôi), nhưng nếu bạn muốn loại bỏ invisible lớp từ mỗi td 500 ms sau khi một khác, bạn có thể sử dụng index:

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

Answer 3

this của bạn được trỏ đến toàn cầu window.

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

Answer 4

Vâng, tôi đã có cùng một vấn đề và tôi đã giải quyết nó theo cách đó ... Nhưng tôi không biết gì về buổi biểu diễn hay gì cả, tôi đã sử dụng nó trong một vòng lặp rất ngắn (10 phần tử tối đa) và nó hoạt động hoàn hảo ... Bằng cách tôi sử dụng nó để thêm một lớp vì vậy tôi sẽ cho bạn tìm ra những gì nó cung cấp để loại bỏ một lớp;).

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); 
});