jQuery: Chờ / Trì hoãn 1 giây mà không thực thi mã

129

Tôi không thể có được .delayphương thức làm việc trong jQuery:

$.delay(3000); // not working
$(queue).delay(3000); // not working

Tôi đang sử dụng vòng lặp while để đợi cho đến khi giá trị thay đổi không được kiểm soát lớn hơn hoặc bằng giá trị khác và tôi không thể tìm thấy bất kỳ cách nào để thực hiện thao tác trong X giây.

— Brian Graham
nguồn

hãy thử sử dụng setTimeout trong cuộc gọi lại

— theshadowmonkey

bạn đang sử dụng phiên bản nào của jquery?

— L7ColWinters

1

đó không phải là chức năng trì hoãn được thiết kế cho nó, nó được thiết kế để sử dụng giữa các sự kiện jquery xếp hàng (như fade (). delay (). show ()). Bạn cần hàm setTimeOut.

— JoJa

@JoJa: Bạn đã đúng về điểm chính, tuy nhiên hình thức hiển thị không có đối số (và ẩn) không sử dụng hàng đợi hiệu ứng.

— Jay Tomten

3

Xin vui lòng, nói những gì bạn đang cố gắng để đạt được với sự chậm trễ. Tất cả JavaScript thực thi trên một luồng và việc đóng băng nó trong X giây có thể gây ra trải nghiệm bất lợi cho người dùng.

— Dmitry Shkuropatsky

176

$ .delay được sử dụng để trì hoãn hoạt ảnh trong hàng đợi, không dừng thực thi.

Thay vì sử dụng vòng lặp while, bạn cần gọi đệ quy một phương thức thực hiện kiểm tra mỗi giây bằng cách sử dụng setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();

— Justin Niessner
nguồn

1

Tôi nghĩ, setTimeout là đủ.

— Jiemurat

3

Bom của bạn, đây chính xác là những gì tôi cần để sửa mã của mình.

— jemiloii

@Jiemurat và bất kỳ ai khác trong tương lai: setTimeout không phá vỡ luồng thực thi. Mã tuyệt vời của Niessner có được điều này cho đến khi các điều kiện trở thành sự thật!

— Gabrer

Nếu bạn không cần phải phá vỡ dòng thực thi, bạn chỉ cần sử dụng setTimeout().

— Joshua Pinter

Tôi luôn nhận được "kiểm tra không phải là một chức năng", mặc dù chức năng kiểm tra của tôi có hai tham số

— Black

211

Bạn cũng có thể trì hoãn một số thao tác theo cách này:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)?

— Matt Sich
nguồn

7

Chỉ là một FYI, điều này không phá vỡ dòng chảy thực thi, vì vậy nếu bạn cần "dừng mọi thứ" trong vài giây, bạn sẽ cần một cái gì đó giống như những gì Niessner đã đăng.

— Joshua Pinter

Có ... đó là một cuộc gọi lại chức năng và không chặn. Cảm ơn câu trả lời, nó đã khắc phục vấn đề của tôi.

— Bertus Kruger

Nếu tần số cực kỳ ngắn và chúng tôi hy vọng chức năng này sẽ chạy mãi mãi, liệu cuối cùng nó có thổi được ngăn xếp không?

— Bunny tự tử

16

Thời gian chờ ES6

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Chỉnh sửa: 204586560000 ms là thời gian gần đúng giữa câu hỏi ban đầu và câu trả lời này ... giả sử tôi đã tính toán chính xác.

— thedanotto
nguồn

2

thực sự tốt khi sử dụng thời gian gần đúng từ câu hỏi ban đầu cho câu trả lời này

— Fuzzybear

9

delayHàm của jQuery có nghĩa là được sử dụng với các hàng đợi hiệu ứng và hiệu ứng, xem các delaytài liệu và ví dụ trong đó:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Nếu bạn muốn quan sát một biến để thay đổi, bạn có thể làm một cái gì đó như

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();

— Julian D.
nguồn

setInterval có tham số bắt buộc thứ hai, thời gian tính bằng mili giây;)

— sara_thepot

1

Cảm ơn @ sara.potyscki, đã sửa.

— Julian D.

@JulianD. Cảm ơn bạn cho đề nghị này. Tôi đáp xuống câu hỏi này trong khi googling cho một giải pháp. Đây chính xác là những gì tôi cần cho dự án của tôi.

— Cheryl Velez

8

JavaScript setTimeoutlà một giải pháp rất tốt:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

Các delayhàm trong jQuery được dùng chủ yếu cho việc trì hoãn hình ảnh động trong một hàng đợi hoạt hình jQuery.

— Jay Tomten
nguồn

5

delay()không dừng dòng mã sau đó chạy lại nó. Không có cách thực tế để làm điều đó trong JavaScript. Mọi thứ phải được thực hiện với các hàm thực hiện các cuộc gọi lại nhưsetTimeout những người khác đã đề cập.

Mục đích của jQuery delay()là tạo ra một hàng đợi hoạt hình chờ trước khi thực hiện. Vì vậy, ví dụ $(element).delay(3000).fadeIn(250);sẽ làm cho phần tử mờ dần sau 3 giây.

— Nathan MacInnes
nguồn

5

Chỉ javascript Nó sẽ hoạt động mà không cần jQuery

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>

— Faruk Omar
nguồn

1

Vòng lặp để chờ trong javascript là một ý tưởng tồi! Tất cả chức năng javascript sẽ dừng trong khi vòng lặp đang chạy. Điều này sẽ có tác dụng phụ không lường trước được. Tốt hơn hết là sử dụng các hàm không chặn như setTimeout ().

— Kevin G.

4

Javascript là ngôn ngữ lập trình không đồng bộ, do đó bạn không thể dừng thực thi trong một thời gian; cách duy nhất bạn có thể [giả] dừng thực thi là sử dụng setTimeout () không phải là độ trễ mà là "gọi lại hàm bị trì hoãn".

— Budio Buda
nguồn

2

Nếu bạn đang sử dụng các tính năng ES6 và bạn đang sử dụng chức năng không đồng bộ, bạn có thể tạm dừng việc thực thi mã trong một thời gian nhất định với chức năng này:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

Đây là cách bạn sử dụng nó:

await delay(5000);

Nó sẽ bị đình trệ với số lượng mili giây được yêu cầu, nhưng chỉ khi bạn ở trong chức năng không đồng bộ . Ví dụ dưới đây:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}

— Anthony De Smet
nguồn