.delay() và .setTimeout()

Question

Theo tài liệu jQuery trên .delay(),

Phương pháp .delay() là tốt nhất cho việc trì hoãn giữa xếp hàng đợi jQuery hiệu ứng. Bởi vì nó bị hạn chế, ví dụ, không cung cấp cách để hủy bỏ độ trễ — .delay() không phải là thay thế cho hàm setTimeout gốc của JavaScript, có thể phù hợp hơn cho trường hợp sử dụng nhất định trường hợp.

Ai đó có thể mở rộng về điều này? Khi nào thích hợp hơn khi sử dụng .delay() và khi nào tốt hơn nên sử dụng .setTimeout()?

Answer 1

Tôi nghĩ rằng những gì bạn đăng tự giải thích thực sự.

Sử dụng .delay() cho các hiệu ứng jQuery bao gồm hoạt ảnh.

setTimeout() được sử dụng tốt nhất cho mọi thứ khác. Ví dụ: khi bạn cần kích hoạt sự kiện tại một thời điểm nhất định.

Answer 2

.delay() chủ yếu được sử dụng để kết hợp các hiệu ứng hoạt ảnh với các khoảng dừng ở giữa.

Như tài liệu đề cập, không có cách nào để hủy bỏ sự chậm trễ. Trong trường hợp bạn có thể muốn hủy bỏ độ trễ, thay vào đó, bạn nên sử dụng setTimeout() để bạn có thể hủy bằng clearTimeout()

Answer 3

Bạn có thể sử dụng delay với hình ảnh động, ví dụ:

$('.message').delay(5000).fadeOut(); 

Bạn cũng có thể sử dụng timeOut để trì hoãn sự khởi đầu của hình ảnh động, ví dụ:

window.setTimeout(function(){ 
    $('.message').fadeOut(); 
}, 5000); 

Như bạn thấy, nó dễ dàng hơn để sử dụng delay hơn setTimeout với hoạt ảnh.

Bạn có thể trì hoãn khá nhiều thứ với setTimeout, nhưng bạn chỉ có thể trì hoãn hoạt ảnh với delay. Phương pháp mà không phải là hình ảnh động không bị ảnh hưởng bởi delay, vì vậy đây sẽ không chờ đợi một thời gian trước khi ẩn phần tử, nó sẽ giấu nó ngay lập tức:

$('.message').delay(5000).hide(); 

Answer 4

Theo như tôi hiểu, .delay() có nghĩa là đặc biệt cho thêm một trì hoãn giữa các phương thức trong một hàng đợi jQuery đã cho. Ví dụ: nếu bạn muốn làm mờ hình ảnh thành chế độ xem trong khoảng thời gian 1 giây, có thể hiển thị trong 5 giây và sau đó dành thêm một giây để làm mờ nó lại, bạn có thể thực hiện như sau:

$('#image').fadeIn(1000).delay(5000).fadeOut(1000); 

Trong trường hợp này, .delay() trực quan hơn để sử dụng vì nó đặc biệt có nghĩa là để trì hoãn các sự kiện trong một hàng đợi jQuery đã cho. Mặt khác, setImeout() là một phương thức JavaScript gốc không được dự định rõ ràng cho một hàng đợi.Nếu bạn muốn một hộp cảnh báo bật lên 1 giây sau khi nhấp vào một nút, bạn có thể làm như sau: hiệu ứng

function delayAlert() { 
    var x = setTimeout("alert('5 seconds later!')", 5000); 
} 

<input type="submit" value="Delay!" onclick="delayAlert();" /> 

Answer 5

phía khác của sự chậm trễ(): có vẻ như để vô hiệu hóa khả năng để ẩn (hoặc fadeOut, vv) các đối tượng bị trì hoãn, cho đến khi sự chậm trễ là hơn.

Ví dụ, tôi thiết lập đoạn mã sau (có lẽ một nhà phát triển stackoverflow sẽ nhận ra những cái tên css ....) để ẩn một 'div':

$j(document).ready(function(){ 
    var $messageDiv = $j("<div>").addClass('fading_message') 
     .text("my alert message here").hide(); 
    var $closeSpan = $j("<span>").addClass('notify_close').text("x"); 
    $closeSpan.click(function() {$j(this).parent().slideUp(400);}); 
    $messageDiv.append($closeSpan); 
    $j('.content_wrapper_div').prepend($messageDiv); 
    $messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0); 
}); 

Nhấp vào "x" đó là trong span (đó là trong 'div') đã kích hoạt chức năng click (tôi đã thử nghiệm với một cảnh báo trong đó), nhưng div không trượt theo chỉ dẫn. Tuy nhiên, nếu tôi thay thế dòng cuối cùng bằng cách này:

 $messageDiv.fadeTo(500, .9); 

.. sau đó tôi đã làm việc - khi tôi nhấp vào "x", xung quanh div slideUp và và đi. Có vẻ như nền chạy của hàm "delay()" trên $ messageDiv "đã khóa" đối tượng đó, do đó một cơ chế riêng biệt cố gắng đóng nó không thể làm như vậy cho đến khi trì hoãn được thực hiện.