Hướng dẫn này trình bày cách dừng hàm setInterval trong JavaScript với sự trợ giúp của hàm clearInterval.

Bạn đang xem : cách dừng setinterval

Đôi khi chúng ta muốn thực thi lặp đi lặp lại một phần mã hoặc một hàm trong JavaScript. Ví dụ: nếu bạn muốn hiển thị cửa sổ bật lên cho người dùng vài giây một lần, bạn có thể sử dụng hàm setInterval .

Tuy nhiên, việc hiển thị tương tự bật lên cho người dùng lặp đi lặp lại có thể gây khó chịu và có thể làm tăng tỷ lệ thoát của trang web, ảnh hưởng đến SEO của bạn.

Tình trạng này chỉ là một trường hợp sử dụng. Tuy nhiên, có nhiều trường hợp bạn cần dừng setInterval sau một thời gian.

Điều này có thể được thực hiện với sự trợ giúp của clearInterval () hàm.

Hàm này lấy ID khoảng thời gian được tạo bởi hàm setInterval () làm đầu vào và sau đó dừng lặp lại hàm khoảng thời gian đó. Phương pháp này thực sự tiện dụng và có thể được sử dụng trong nhiều trường hợp khác nhau.

Bây giờ, hãy xem cách sử dụng hàm này để dừng hàm setInterval trong JavaScript.

Dừng setInterval () Sử dụng hàm clearInterval () trong JavaScript

Hàm setInterval () được sử dụng để gọi một hàm hoặc thực thi một đoạn mã nhiều lần sau một khoảng thời gian cố định. Phương thức này trả về một id có thể được sử dụng sau này để xóa hoặc dừng khoảng thời gian bằng cách sử dụng clearInterval () .

Cú pháp:

  var khoảngID = setInterval (func, [delay, arg1, arg2, ...]);
 

Dưới đây là các tham số mà hàm setInterval () nhận:

  1. func : A hàm mà bạn muốn tiếp tục thực thi sau một thời gian.
  2. delay : Độ trễ là thời gian tính bằng mili giây (đối số này là tùy chọn). Hàm sẽ tiếp tục lặp lại sau mỗi lần trì hoãn.
  3. args1, ..., argN : Bạn cũng có thể chuyển các đối số khác nhau vào hàm setInterval , sau đó sẽ được lấy làm đầu vào bởi hàm mà bạn đã chuyển cho setInterval () . Đối số này cũng là tùy chọn.

Đầu tiên, hãy tạo một hàm có tên showText () , hàm này sẽ in từ Hello trên màn hình cứ sau 1 giây. Mục tiêu của chúng tôi là dừng khoảng thời gian bất cứ khi nào người dùng nhấp vào nút Dừng in .

Chúng tôi đã tạo một nút có thuộc tính onClick bên trong tài liệu HTML . Thuộc tính này sẽ thực thi hàm stopInterval () khi người dùng nhấp vào nút này.

Toàn bộ mã JavaScript của chúng tôi sẽ đi vào bên trong tệp index.js , và chúng tôi sẽ liên kết tệp đó với tài liệu HTML của mình bằng thẻ script như sau.

  & lt; body & gt;
    & lt; button onclick = "stopInterval ()" & gt; Dừng In & lt; / button & gt;
    & lt; script src = "index.js" & gt; & lt; / script & gt;
& lt; / body & gt;
 

Sau đó, chúng ta phải tạo một biến distanceID và hai hàm showText () stopInterval () bên trong tệp JavaScript.

Bên trong hàm showText () , trước tiên chúng ta sẽ tạo một thẻ h1 và sau đó lưu trữ nó bên trong văn bản biến . Tiếp theo, chúng tôi sẽ thêm văn bản Hello vào biến text bằng cách sử dụng thuộc tính innerHTML .

Cuối cùng, chúng tôi sẽ nối text vào body của tài liệu HTML.

  var periodID;
function showText ()
{
    var text = document.createElement ('h1');
    text.innerHTML = "Xin chào";

    document.body.appendChild (văn bản);
}

function stopInterval () {
    console.log ("dừng khoảng thời gian ...")
    clearInterval (khoảngID);
}

khoảngID = setInterval (showText, 1000);
 

Trong hàm stopInterval () , trước tiên chúng ta sẽ ghi lại một câu lệnh dừng khoảng ... , điều này sẽ cho biết rằng nút dừng được nhấn.

Sau đó, chúng tôi sẽ sử dụng một hàm tích hợp sẵn trong JavaScript có tên là clearInterval () và chuyển biến distanceID mà chúng tôi có đã tạo.

Cuối cùng, chúng ta sẽ gọi hàm setInterval () và sau đó chuyển hàm showText mà chúng ta đã tạo và khoảng thời gian trễ là 1000 mili giây, tức là 1 giây.

Một ID sẽ được tạo bất cứ khi nào chúng tôi gọi hàm setInterval () và chúng tôi sẽ lưu trữ ID đó bên trong < biến code> khoảngID . ID này sẽ hữu ích khi chúng ta cần dừng khoảng thời gian.

Đây, setInterval ()Hàm sẽ được gọi ngay sau khi trang được tải và bạn sẽ thấy dòng chữ Hello được in trên màn hình. Bạn có thể nhấn nút dừng bất cứ khi nào bạn muốn dừng khoảng thời gian đó.

Vui lòng xem hình ảnh ở trên để biết đầu ra của mã mà chúng tôi đã viết.

Viết cho chúng tôi

Các bài viết trên DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để dừng setinterval

The javaScript method setInterval EXPLAINED in 5 minutes!

  • Tác giả: Code with Ania Kubów
  • Ngày đăng: 2020-05-15
  • Đánh giá: 4 ⭐ ( 4313 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I show you how to use the inbuilt JavaScript method setInterval() in a simple theoretical example, and then a more complex production example, using my game of whack-a-mole.

    This video is part of my ‘JavaScript Method Series’.

    I would love to hear your thoughts on my video, so please do reach out to me on YouTube, Twitter (https://twitter.com/ania_kubow) or Instagram (https://instagram.com/aniakubow) 🙂

    Oh and please do Subscribe and hit that bell button! It would mean a lot to me and motivate me to make more videos for you all!

    javascript
    javscript_game

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

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2773 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 cách nào để dừng setInterval trong Angular

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

Làm cách nào để ngăn setInterval () của tôi nhân lên?

  • Tác giả: vie.firstbaptistdemopolis.org
  • Đánh giá: 3 ⭐ ( 2862 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang sửa đổi Trình chiếu đơn giản tốt hơn để có khả năng tạm dừng. Tôi đã quản lý để tách tạm dừng và bỏ tạm dừng autoCycle () thành các phương thức của riêng chúng (pauseCycle và unauseCycle), vì vậy tôi có thể …

Tìm hiểu setTimeout và setInterval trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 1630 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Scheduling: setTimeout and setInterval Giới thiệu chung Một block mã Javascript thường được thực thi đồng bộ. Tuy nhiên có một số hàm Javascript (timers) cho phép chúng ta trì hoãn việc thự…

Làm thế nào để ngừng suy nghĩ quá nhiều?

  • Tác giả: www.vinmec.com
  • Đánh giá: 4 ⭐ ( 8735 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Suy nghĩ nhiều phải làm sao? Cuộc sống ngày càng bộn bề và áp lực khiến nhiều người rơi vào tình trạng mệt mỏi vì suy nghĩ quá nhiều. Thật may là tình trạng này có thể giải quyết được nếu bạn kiên trì thực hiện các biện pháp dưới đây.

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

  • Tác giả: vi-magento.com
  • Đánh giá: 4 ⭐ ( 3147 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.

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

Xem Thêm  Trang làm mới HTML: Hướng dẫn đầy đủ về cách tạo làm mới tự động - tải lại trang trong html

By ads_php