Làm cách nào để thêm khoảng dừng giữa mỗi lần lặp lại của jQuery .each ()?

Tôi lấy một mảng các đối tượng jQuery và sau đó thông qua .each () sửa đổi từng jquery riêng lẻ với trong mảng.

Trong trường hợp này, tôi đã cập nhật tên lớp để kích hoạt thuộc tính -webkit-chuyển đổi-để sử dụng chuyển đổi css.

Tôi muốn tạm dừng trước khi mỗi quá trình chuyển đổi css bắt đầu. Tôi đang sử dụng phần mềm sau, nhưng không có độ trễ giữa mỗi lần cập nhật. Thay vào đó, tất cả chúng dường như đang cập nhật cùng một lúc.

function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

function addPositioningClasses($card){
  $card
    .addClass('position')
}

Tôi đã hy vọng setTimeout sẽ giải quyết được điều này, nhưng có vẻ như nó không hoạt động. Có cách nào để thực hiện tạm dừng trước mỗi lần cập nhật tên CLASS của từng đối tượng không?

Tôi đã thêm điều này dưới dạng nhận xét nhưng bây giờ tôi đã đọc nó một cách chính xác và trả lời câu hỏi của riêng tôi, điều này có thể sẽ hoạt động:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}

Xin lỗi vì đã đào bới một chủ đề cũ, nhưng mẹo này có thể hữu ích cho các vấn đề tương tự:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});

Nếu bạn thực hiện một phương thức tự gọi mỗi 500 ms sẽ thực hiện thủ thuật đó. Đoạn mã sau sẽ hoạt động.

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

Đã thử nghiệm trên fiddle: http://jsfiddle.net/jomanlk/haGfU/

Còn .delay () thì sao?

hoặc là

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}

Nếu bạn chỉ nhắm mục tiêu Safari / iOS, tùy thuộc vào mức độ quan trọng đối với bạn trong việc kiểm soát thời gian chính xác của chuỗi hoạt ảnh, bạn có thể nên tránh bất kỳ giải pháp nào liên quan đến thời gian chờ JS. Không có gì đảm bảo rằng hoạt ảnh sẽ hoàn thành cùng lúc với độ trễ thời gian chờ, đặc biệt là trên bộ xử lý chậm hoặc máy có nhiều nội dung đang diễn ra trong nền. Các phiên bản sau của bộ webkit (bao gồm cả safari trên điện thoại di động) cho phép các chuỗi hoạt ảnh được hẹn giờ thông qua @-webkit-keyframes. Webkit.org có một phần giới thiệu hay về nó . Nó thực sự khá dễ thực hiện.

Hãy thử cái này:

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

Thành thật mà nói ... Tôi đã từng có $ (this) .delay () hoạt động sai trong quá khứ trong một số trường hợp nhất định và làm việc không hoàn hảo với những người khác. Tuy nhiên, điều này thường kết hợp với các lệnh gọi hoạt ảnh jQuery, không phải thao tác thuộc tính DOM.

Xin lưu ý rằng .delay () không hoạt động theo cách giống như setTimeout. Để biết thêm thông tin, hãy xem tài liệu jQuery .delay () .

Theo như tôi được biết, $ (). Mỗi cái thực thi theo thủ tục vì vậy lần lặp tiếp theo của cuộc gọi chỉ nên bắt đầu sau khi phần trước đã hoàn thành.

Kiểm tra này, làm việc tốt cho tôi! :)

jQuery('.optiresultsul li').each(function(index) {
    jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
        jQuery(this).addClass('bgchecked');
    });
});

Mã này sẽ thêm thiết lập độ trễ inital thành 50ms. Sau đó, đối với mỗi vòng lặp qua lớp ".row", nó sẽ thêm độ trễ 200ms. Điều này sẽ tạo ra hiệu ứng hiển thị trễ đẹp mắt cho mỗi hàng.

$( document ).ready(function() {
    // set inital delay
    var dtotal = 50;
    $(".row").each(function() {
    //add delay to function
      $(this).delay(dtotal).show();
    //add 200ms to delay for each loop
      dtotal = dtotal + 200;
    });
});