Hướng dẫn này sẽ giúp bạn hiểu cách hoạt động của phương thức JavaScript setTimeout () tích hợp sẵn với các ví dụ mã trực quan. Cách sử dụng setTimeout () trong JavaScript Phương thức setTimeout () cho phép bạn thực thi một đoạn mã sau một khoảng thời gian nhất định đã trôi qua. Bạn có thể nghĩ về phương pháp này là

Bạn đang xem: javascript dừng tất cả các bộ đếm thời gian

Hướng dẫn này sẽ giúp bạn hiểu cách thức phương pháp JavaScript tích hợp sẵn setTimeout () hoạt động với các ví dụ mã trực quan.

Cách sử dụng setTimeout () trong JavaScript

Phương thức setTimeout () cho phép bạn thực thi một đoạn mã sau một khoảng thời gian nhất định đã trôi qua. Bạn có thể coi phương pháp này như một cách để đặt bộ đếm thời gian chạy mã JavaScript tại một thời điểm nhất định.

Ví dụ: đoạn mã bên dưới sẽ in “Hello World” ra bảng điều khiển JavaScript sau 2 giây trôi qua :

  setTimeout (function () {
    console.log ("Xin chào Thế giới");
}, 2000);

console.log ("setTimeout () example ...");  

ví dụ về phương thức setTimeout ()

Đoạn mã trên trước tiên sẽ in “setTimeout () example …” ra bảng điều khiển, và sau đó in “Hello World” sau khi hai giây trôi qua kể từ khi mã được JavaScript thực thi.

Cú pháp của phương thức setTimeout () như sau:

< pre> setTimeout (hàm, mili giây, tham số1, tham số2, ...); cú pháp phương thức setTimeout ()

Tham số đầu tiên của setTimeout () là một hàm trong JavaScript mà bạn muốn thực thi. Bạn có thể viết hàm trực tiếp khi chuyển nó, hoặc bạn cũng có thể tham khảo một hàm được đặt tên như hình dưới đây:

  hàm chào ( ) {
  console.log ("Xin chào Thế giới");
}

setTimeout (lời chào);  

phương thức setTimeout () sử dụng hàm được đặt tên làm đối số của nó

Tiếp theo, bạn có thể chuyển tham số mili giây , sẽ là lượng thời gian JavaScript sẽ đợi trước khi thực thi mã.

Một giây bằng một nghìn mili giây, vì vậy nếu bạn muốn đợi trong 3 giây, bạn cần chuyển 3000 làm đối số thứ hai:

  hàm chào () {
  console.log ("Xin chào Thế giới");
}

setTimeout (welcome, 3000);  

setTimeout () phương thức ngủ trong 3 giây

Nếu bạn bỏ qua tham số thứ hai, thì setTimeout () sẽ ngay lập tức thực thi < code> function mà không cần chờ đợi gì cả.

Cuối cùng, bạn cũng có thể chuyển các tham số bổ sung vào phương thức setTimeout () mà bạn có thể sử dụng bên trong hàm như sau:

  hàm chào (tên, vai trò) {
  console.log (`Xin chào, tôi tên là $ {name}`);
  console.log (`Tôi là $ {role}`);
}

setTimeout (lời chào, 3000, "Nathan", "Nhà phát triển phần mềm");  

setTimeout () với các tham số bổ sung cho hàm

Xem Thêm  GeeksforGeeks - đặt hàng bằng lệnh trong sql

Bây giờ bạn có thể đang nghĩ, “tại sao không chỉ truyền trực tiếp các tham số vào hàm? “

Điều này là do nếu bạn truyền trực tiếp các tham số như sau:

  setTimeout (câu chào (" Nathan "," Nhà phát triển phần mềm "), 3000);  

Sau đó, JavaScript sẽ ngay lập tức thực thi hàm mà không cần chờ đợi, vì bạn đang chuyển một lệnh gọi hàm chứ không phải tham chiếu hàm như tham số đầu tiên.

Đây là lý do tại sao nếu bạn cần chuyển bất kỳ tham số nào cho hàm, bạn cần chuyển chúng từ phương thức setTimeout () .

Nhưng thành thật mà nói, Tôi chưa bao giờ thấy cần phải chuyển các tham số bổ sung cho phương thức setTimeout () trong vai trò là Nhà phát triển phần mềm, vì vậy đừng lo lắng về điều này 😉

Cách hủy phương thức setTimeout

Bạn cũng có thể ngăn phương thức setTimeout () thực thi hàm bằng cách sử dụng phương thức clearTimeout () .

Phương thức clearTimeout () yêu cầu id do setTimeout trả về () để biết phương thức setTimeout () nào cần hủy:

  clearTimeout (id);  < / pre> clearTimeout () cú pháp 

Đây là một ví dụ về phương thức clearTimeout () đang hoạt động:

  const timeoutId = setTimeout (hàm số(){
    console.log ("Xin chào Thế giới");
}, 2000);

clearTimeout (timeoutId);
console.log (`Timeout ID $ {timeoutId} đã bị xóa`);  

clearTimeout () phương thức đang hoạt động

Nếu bạn có nhiều phương thức setTimeout () , thì bạn cần lưu các ID được trả về cho mỗi lần gọi phương thức và sau đó gọi phương thức clearTimeout () nhiều lần nếu cần để xóa tất cả.

Kết luận

Phương thức JavaScript setTimeout () là một phương thức tích hợp cho phép bạn tính thời gian thực thi một function < / mã>. Bạn cần vượt qua khoảng thời gian chờ tính bằng mili giây , có nghĩa là để đợi một giây, bạn cần vượt qua một nghìn mili giây .

Để hủy chạy phương thức setTimeout () , bạn cần sử dụng phương thức clearTimeout () , chuyển giá trị ID được trả về khi bạn gọi setTimeout () method.

Cảm ơn bạn đã đọc hướng dẫn này

Nếu bạn muốn tìm hiểu thêm về JavaScript, bạn có thể muốn xem trang web của tôi tại sebhastian.com, nơi tôi đã xuất bản hơn 100 hướng dẫn về lập trình với JavaScript , tất cả đều sử dụng giải thích dễ hiểu và ví dụ mã.

Các hướng dẫn bao gồm thao tác chuỗi, thao tác ngày tháng, phương thức Mảng và đối tượng, giải pháp thuật toán JavaScript, v.v.


Xem thêm những thông tin liên quan đến chủ đề javascript dừng tất cả các bộ hẹn giờ

JavaScript timing events

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-01-07
  • Đánh giá: 4 ⭐ ( 4006 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    http://www.youtube.com/user/kudvenkat/playlists

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/01/javascript-timing-events.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In JavaScript a piece of code can be executed at specified time interval. For example, you can call a specific JavaScript function every 1 second. This concept in JavaScript is called timing events.

    The global window object has the following 2 methods that allow us to execute a piece of JavaScript code at specified time intervals.

    setInterval(func, delay) - Executes a specified function, repeatedly at specified time interval. This method has 2 parameters. The func parameter specifies the name of the function to execute. The delay parameter specifies the time in milliseconds to wait before calling the specified function.

    setTimeout(func, delay) - Executes a specified function, after waiting a specified number of milliseconds. This method has 2 parameters. The func parameter specifies the name of the function to execute. The delay parameter specifies the time in milliseconds to wait before calling the specified function. The actual wait time (delay) may be longer.

    Let's understand timing events in JavaScript with an example. The following code displays current date and time in the div tag.

    [div id="timeDiv" ][/div]
    [script type="text/javascript"]
    function getCurrentDateTime() {
    document.getElementById("timeDiv").innerHTML = new Date();
    }

    getCurrentDateTime();
    [/script]

    At the moment the time is static. To make the time on the page dynamic modify the script as shown below. Notice that the time is now updated every second. In this example, we are using setInterval() method and calling getCurrentDateTime() function every 1000 milli-seconds.

    [div id="timeDiv" ][/div]
    [script type="text/javascript"]
    setInterval(getCurrentDateTime, 1000);

    function getCurrentDateTime() {
    document.getElementById("timeDiv").innerHTML = new Date();
    }
    [/script]

    clearInterval(intervalID) - Cancels the repeated execution of the method that was set up using setInterval() method. intervalID is the identifier of the repeated action you want to cancel. This ID is returned from setInterval() method. The following example demonstrates the use of clearInterval() method.

    Starting and stopping the clock with button click : In this example, setInterval() method returns the intervalId which is then passed to clearInterval() method. When you click the "Start Clock" button the clock is updated with new time every second, and when you click "Stop Clock" button it stops the clock.

    [div id="timeDiv" ][/div]
    [br /]
    [input type="button" value="Start Clock" onclick="startClock()" /]
    [input type="button" value="Stop Clock" onclick="stopClock()" /]
    [script type="text/javascript"]
    var intervalId;

    function startClock() {
    intervalId = setInterval(getCurrentDateTime, 1000);
    }

    function stopClock() {
    clearInterval(intervalId);
    }

    function getCurrentDateTime() {
    document.getElementById("timeDiv").innerHTML = new Date();
    }

    getCurrentDateTime();
    [/script]

    Now let's look at example of using setTimeout() and clearTimeout() functions. The syntax and usage of these 2 functions is very similar to setInterval() and clearInterval().

    Countdown timer example : When we click "Start Timer" button, the value 10 displayed in the textbox must start counting down. When click "Stop Timer" the countdown should stop. When you click "Start Timer" again, it should start counting down from where it stopped and when it reaches ZERO, it should display done in the textbox and function should return.

    // timing events in javascript.png

    [input type="text" value="10" id="txtBox" /]
    [br /][br /]
    [input type="button" value="Start Timer" onclick="startTimer('txtBox')" /]
    [input type="button" value="Stop Timer" onclick="stopTimer()" /]
    [script type="text/javascript"]
    var intervalId;

    function startTimer(controlId)
    {
    var control = document.getElementById(controlId);
    var seconds = control.value;
    seconds = seconds - 1;
    if (seconds == 0)
    {
    control.value = "Done";
    return;
    }
    else
    {
    control.value = seconds;
    }

    intervalId = setTimeout(function () { startTimer('txtBox'); }, 1000);
    }

    function stopTimer()
    {
    clearTimeout(intervalId);
    }
    [/script]

Cách sử dụng setTimeout() và setInterval() trong JavaScript

  • Tác giả: vi-magento.com
  • Đánh giá: 4 ⭐ ( 9127 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: setTimeout() và setInterval() trong JavaScript cho phép chúng ta chạy function func() một hoặc lặp đi lặp lại sau delay milliseconds.

Bộ hẹn giờ setTimeout() và setInterval() trong JavaScript-tuvi365

  • Tác giả: tuvi365.net
  • Đánh giá: 5 ⭐ ( 6405 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Dừng cuộc gọi setInterval trong JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] setInterval()trả về một ID khoảng thời gian mà bạn có thể chuyển đến clearInterval(): var refreshIntervalId…

Làm việc với bộ hẹn giờ trong Node.js

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8049 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ đếm thời gian là đa giác. Chúng rất hữu ích trong nhiều trường hợp sử dụng. Hầu hết tất cả các ngôn ngữ lập trình chính đều hỗ trợ chúng, và Node.js cũng không ngoại lệ. Nó thực sự đơn…

C# hẹn giờ dừng sau một số số lần tự động đánh dấu

  • Tác giả: vi.uwenku.com
  • Đánh giá: 5 ⭐ ( 5207 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm thế nào để dừng bộ đếm thời gian sau một số dấu tích hoặc sau, giả sử, 3-4 giây? Vì vậy, tôi bắt đầu hẹn giờ và tôi muốn sau 10 lần đánh dấu hoặc sau 2-3 giây để tự động dừng. Cảm ơn!

HƯỚNG DẪN SỬ DỤNG TIMER - HẸN GIỜ TỰ ĐỘNG

  • Tác giả: thietbinongnghiep24h.com
  • Đánh giá: 4 ⭐ ( 3681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ hẹn giờ KG316T-II (thiết bị hẹn giờ) là sản phẩm có nhiều ưu điểm nổi trội hơn so với các dòng hẹn giờ khác trên thị trường. Thiết kế nhỏ gọn, tao nhã, chất...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php