Cách đặt thời gian trễ trong javascript

Question

Tôi có một phần js trong trang web của mình để chuyển đổi hình ảnh nhưng cần một sự chậm trễ khi bạn nhấp vào hình ảnh lần thứ hai. Độ trễ phải là 1000ms. Vì vậy, bạn sẽ nhấp vào img.jpg thì img_onclick.jpg sẽ xuất hiện. Sau đó bạn sẽ nhấp vào hình ảnh img_onclick.jpg sau đó sẽ có sự chậm trễ 1000ms trước khi img.jpg được hiển thị lại.

Đây là mã:

jQuery(document).ready(function($) { 

    $(".toggle-container").hide(); 
    $(".trigger").toggle(function() { 
     $(this).addClass("active"); 
     $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg'); 
    }, function() { 
     $(this).removeClass("active"); 
     $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg'); 
    }); 
    $(".trigger").click(function() { 
     $(this).next(".toggle-container").slideToggle(); 
    }); 
}); 

Answer 1

Sử dụng setTimeout():

var delayInMilliseconds = 1000; //1 second 

setTimeout(function() { 
    //your code to be executed after 1 second 
}, delayInMilliseconds); 

Nếu bạn muốn làm điều đó mà không setTimeout: Tham khảo this question.

Answer 2

setTimeout(function(){ 


}, 500); 

Nơi mã của bạn bên trong { }

500 = 0,5 giây

2200 = 2,2 giây

, vv

Answer 3

Có hai (chủ yếu được sử dụng) loại timer chức năng trong javascript setTimeout và setInterval (other)

Cả hai phương pháp này đều có chữ ký giống nhau. Họ lấy một hàm gọi lại và thời gian trễ làm tham số.

setTimeout chỉ thực hiện một lần sau khi trì hoãn trong khi setInterval tiếp tục gọi hàm gọi lại sau mỗi số lần chậm trễ.

cả hai phương thức này trả về số nhận dạng nguyên có thể được sử dụng để xóa chúng trước khi bộ hẹn giờ hết hạn.

clearTimeout và clearInterval cả các phương pháp này có một nhận dạng số nguyên trở về từ hàm trên setTimeout và setInterval

Ví dụ:

setTimeout

alert("before setTimeout"); 

setTimeout(function(){ 
     alert("I am setTimeout"); 
    },1000); //delay is in milliseconds 

    alert("after setTimeout"); 

Nếu bạn chạy các đoạn mã trên bạn sẽ thấy rằng nó cảnh báo before setTimeout và sau đó after setTimeout cuối cùng nó cảnh báo I am setTimeout sau 1 giây (1000ms)

Những gì bạn có thể nhận thấy từ ví dụ là các setTimeout(...) là không đồng bộ có nghĩa là nó không chờ đợi cho bộ đếm thời gian để trôi qua trước đi đến tuyên bố tiếp theo i.e alert("after setTimeout");

Ví dụ:

setInterval

alert("before setInterval"); //called first 

var tid = setInterval(function(){ 
     //called 5 times each time after one second 
     //before getting cleared by below timeout. 
     alert("I am setInterval"); 
    },1000); //delay is in milliseconds 

    alert("after setInterval"); //called second 

setTimeout(function(){ 
    clearInterval(tid); //clear above interval after 5 seconds 
},5000); 

Nếu bạn chạy các mã trên, bạn sẽ thấy rằng nó cảnh báo before setInterval và sau đó after setInterval cuối cùng nó cảnh báo I am setInterval 5 lần sau 1 giây (1000ms) vì setTimeout xóa bộ hẹn giờ sau 5 giây hoặc cứ sau mỗi 1 giây bạn sẽ nhận được cảnh báo I am setInterval Vô hạn.

Trình duyệt nội bộ thực hiện điều đó như thế nào?

Tôi sẽ giải thích ngắn gọn.

Để hiểu rằng bạn phải biết về hàng đợi sự kiện trong javascript. Có một hàng đợi sự kiện được triển khai trong trình duyệt. Bất cứ khi nào một sự kiện được kích hoạt trong js, tất cả các sự kiện này (như nhấp vào vv ..) được thêm vào hàng đợi này. Khi trình duyệt của bạn không có gì để thực thi, nó lấy một sự kiện từ hàng đợi và thực thi chúng từng cái một.

Bây giờ, khi bạn gọi setTimeout hoặc setInterval gọi lại của bạn được đăng ký vào bộ đếm thời gian trong trình duyệt và được thêm vào hàng đợi sự kiện sau khi hết thời gian nhất định và cuối cùng javascript lấy sự kiện từ hàng đợi và thực thi nó.

Điều này xảy ra như vậy, vì công cụ javascript là luồng đơn và chúng chỉ có thể thực thi một lần tại một thời điểm. Vì vậy, họ không thể thực hiện javascript khác và theo dõi bộ hẹn giờ của bạn. Đó là lý do tại sao những bộ hẹn giờ này được đăng ký với trình duyệt (trình duyệt không phải là luồng đơn) và nó có thể theo dõi bộ đếm thời gian và thêm một sự kiện trong hàng đợi sau khi bộ hẹn giờ hết hạn.

tương tự xảy ra cho setInterval chỉ trong trường hợp này sự kiện được thêm vào hàng đợi một lần nữa và một lần nữa sau khoảng thời gian được chỉ định cho đến khi nó được xóa hoặc làm mới trang trình duyệt.

Note

Tham số chậm trễ để bạn vượt qua các chức năng này là tối thiểu chậm trễ thời gian để thực hiện gọi lại. Điều này là do sau khi hết giờ trình duyệt thêm sự kiện vào hàng đợi sẽ được thực thi bởi công cụ javascript nhưng việc thực thi cuộc gọi lại tùy thuộc vào vị trí sự kiện trong hàng đợi và khi động cơ đơn luồng, sẽ thực thi tất cả các sự kiện trong hàng đợi một.

Do đó, gọi lại của bạn đôi khi có thể mất nhiều hơn thời gian trễ được chỉ định khi mã khác chặn chuỗi và không cho nó thời gian xử lý những gì có trong hàng đợi.

Và như tôi đã đề cập javascript là một chuỗi. Vì vậy, nếu bạn chặn các chủ đề cho lâu dài.

Giống như mã này

while(true) { //infinite loop 
} 

sử dụng của bạn có thể nhận được một thông báo nói trang không đáp ứng.

Answer 4

Nếu bạn cần làm mới, đây là một posibility:

setTimeout(function() { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);