programming javascript

Khoảng thời gian dừng javascript sau một thời gian

Trong bài đăng này, chúng tôi sẽ cung cấp cho bạn thông tin về Làm thế nào để dừng setinterval[] sau đôi khi trong jquery?. Nghe này, chúng tôi sẽ cung cấp cho bạn chi tiết về Cách dừng setinterval[] sau đôi khi trong jquery? Và cách sử dụng nó cũng cung cấp cho bạn bản demo cho nó nếu cần thiết

Đôi khi chúng tôi yêu cầu dừng setInterval[] sau một thời gian, vì vậy hôm nay tôi sẽ cung cấp cho bạn ví dụ đơn giản với setInterval dừng sau một thời gian

Trong ví dụ này tôi sử dụng hai chức năng như được liệt kê dưới đây

setInterval[]. Gọi vào khoảng thời gian quy định

ClearInterval[]. Dừng đặt khoảng thời gian

Bạn có thể xem ví dụ đầy đủ bên dưới, cách dừng setinterval sau 1 phút, Bạn cũng có thể xem bản demo, ví dụ này hoạt động như thế nào

mục lục. html

Xem thêm. Jquery Select2 – Hộp chọn có mã ví dụ tìm kiếm


    Jquery setinterval stop after sometime
    

    Click to Start
    

    
	    $[document].ready[function[] {
	        $["button"].click[function[]{

	         $[this].attr["disabled",true];
	         $["pre"].append['Stop After 1min.
'];

	         var countTime = 0;
	         var storeTimeInterval = setInterval[function[]{
	        	++countTime;
	        	$["pre"].append[countTime*5 + 'sec.
'];
	        	if[countTime == 12]{
	        		clearInterval[storeTimeInterval];
	        		$["pre"].append['stop'];
	        	}
	         }, 5000];
	        }];
	    }];

Có lẽ nó có thể giúp bạn…

Hy vọng mã và bài đăng này sẽ giúp bạn triển khai Làm thế nào để dừng setinterval[] sau đôi khi trong jquery?. nếu bạn cần bất kỳ trợ giúp hoặc bất kỳ phản hồi nào, hãy đưa ra trong phần bình luận hoặc bạn có ý tưởng hay về bài đăng này, bạn có thể đưa ra phần bình luận. Nhận xét của bạn sẽ giúp chúng tôi giúp bạn nhiều hơn và cải thiện chúng tôi. chúng tôi cũng sẽ cung cấp cho bạn loại bài đăng thú vị hơn này trong phần nổi bật,

Chúng tôi có thể quyết định thực hiện một chức năng không phải bây giờ, nhưng tại một thời điểm nhất định sau đó. Đó gọi là “lên lịch cuộc gọi”

Có hai phương pháp cho nó

```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
7 cho phép chúng tôi chạy một chức năng một lần sau khoảng thời gian
```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
8 cho phép chúng ta chạy lặp lại một chức năng, bắt đầu sau khoảng thời gian, sau đó lặp lại liên tục ở khoảng thời gian đó

Các phương thức này không phải là một phần của đặc tả JavaScript. Nhưng hầu hết các môi trường đều có bộ lập lịch nội bộ và cung cấp các phương thức này. Đặc biệt, chúng được hỗ trợ trên mọi trình duyệt và Node. js

cú pháp

let timerId = setTimeout[func|code, [delay], [arg1], [arg2], ...]

Thông số

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

9Chức năng hoặc một chuỗi mã để thực thi. Thông thường, đó là một chức năng. Vì lý do lịch sử, một chuỗi mã có thể được chuyển, nhưng điều đó không được khuyến nghị.

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

0Độ trễ trước khi chạy, tính bằng mili giây [1000 ms = 1 giây], theo mặc định 0.

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

2…Các đối số của hàm

Chẳng hạn, mã này gọi

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

3 sau một giây

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Với lập luận

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

Nếu đối số đầu tiên là một chuỗi, thì JavaScript sẽ tạo một hàm từ nó

Vì vậy, điều này cũng sẽ làm việc

setTimeout["alert['Hello']", 1000];

Nhưng không nên sử dụng các chuỗi, hãy sử dụng các hàm mũi tên thay vì chúng, như thế này

setTimeout[[] => alert['Hello'], 1000];

Vượt qua một chức năng, nhưng không chạy nó

Các nhà phát triển mới làm quen đôi khi mắc lỗi khi thêm dấu ngoặc _______5_______4 sau hàm

// wrong!
setTimeout[sayHi[], 1000];

Điều đó không hiệu quả, bởi vì

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 mong đợi một tham chiếu đến một chức năng. Và ở đây

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

3 chạy hàm, và kết quả thực hiện của nó được chuyển đến

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7. Trong trường hợp của chúng tôi, kết quả của

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

3 là

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

9 [hàm không trả về gì cả], vì vậy không có gì được lên lịch

Một cuộc gọi tới

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 trả về một “số nhận dạng bộ đếm thời gian”

setTimeout["alert['Hello']", 1000];

1 mà chúng tôi có thể sử dụng để hủy thực thi

Cú pháp để hủy bỏ

let timerId = setTimeout[...];
clearTimeout[timerId];

Trong mã bên dưới, chúng tôi lên lịch cho chức năng và sau đó hủy bỏ nó [đã thay đổi ý định]. Kết quả là không có gì xảy ra

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

Như chúng ta có thể thấy từ đầu ra

setTimeout["alert['Hello']", 1000];

2, trong trình duyệt, mã định danh bộ đếm thời gian là một số. Trong các môi trường khác, đây có thể là một cái gì đó khác. Chẳng hạn, Nút. js trả về một đối tượng hẹn giờ với các phương thức bổ sung

Một lần nữa, không có thông số kỹ thuật chung cho các phương pháp này, vì vậy điều đó ổn thôi

Đối với trình duyệt, bộ hẹn giờ được mô tả trong HTML Living Standard

Phương thức

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8 có cú pháp giống như phương thức

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

let timerId = setInterval[func|code, [delay], [arg1], [arg2], ...]

Tất cả các đối số có cùng một ý nghĩa. Nhưng không giống như

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7, chức năng này không chỉ chạy một lần mà thường xuyên sau một khoảng thời gian nhất định

Để dừng các cuộc gọi tiếp theo, chúng ta nên gọi

setTimeout["alert['Hello']", 1000];

Ví dụ sau sẽ hiển thị thông báo cứ sau 2 giây. Sau 5 giây, đầu ra bị dừng

// repeat with the interval of 2 seconds
let timerId = setInterval[[] => alert['tick'], 2000];

// after 5 seconds stop
setTimeout[[] => { clearInterval[timerId]; alert['stop']; }, 5000];

Thời gian tiếp tục trong khi

setTimeout["alert['Hello']", 1000];

2 được hiển thị

Trong hầu hết các trình duyệt, bao gồm cả Chrome và Firefox, bộ đếm thời gian bên trong tiếp tục "tích tắc" trong khi hiển thị

setTimeout["alert['Hello']", 1000];

Vì vậy, nếu bạn chạy đoạn mã trên và không bỏ qua cửa sổ

setTimeout["alert['Hello']", 1000];

2 trong một thời gian, thì cửa sổ

setTimeout["alert['Hello']", 1000];

2 tiếp theo sẽ được hiển thị ngay khi bạn thực hiện. Khoảng thời gian thực tế giữa các cảnh báo sẽ ngắn hơn 2 giây

Có hai cách để chạy một cái gì đó thường xuyên

Một là

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8. Cái còn lại là một

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 lồng nhau, như thế này

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 ở trên lên lịch cuộc gọi tiếp theo ngay khi kết thúc cuộc gọi hiện tại

setTimeout[[] => alert['Hello'], 1000];

Phương pháp lồng nhau

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 linh hoạt hơn so với phương pháp

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8. Bằng cách này, cuộc gọi tiếp theo có thể được lên lịch khác nhau, tùy thuộc vào kết quả của cuộc gọi hiện tại

Chẳng hạn, chúng ta cần viết một dịch vụ cứ 5 giây lại gửi một yêu cầu đến máy chủ để yêu cầu dữ liệu, nhưng trong trường hợp máy chủ bị quá tải, nó sẽ tăng khoảng thời gian lên 10, 20, 40 giây…

Đây là mã giả

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Và nếu các chức năng mà chúng tôi đang lập lịch sử dụng nhiều CPU, thì chúng tôi có thể đo thời gian thực hiện và lập kế hoạch cho cuộc gọi tiếp theo sớm hay muộn

Lồng nhau

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 cho phép đặt độ trễ giữa các lần thực hiện chính xác hơn

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Hãy so sánh hai đoạn mã. Cái đầu tiên sử dụng

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Cái thứ hai sử dụng

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 lồng nhau

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Đối với

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8, bộ lập lịch nội bộ sẽ chạy

// wrong!
setTimeout[sayHi[], 1000];

2 cứ sau 100 mili giây

Bạn có để ý không?

Độ trễ thực giữa các lần gọi

// wrong!
setTimeout[sayHi[], 1000];

3 cho

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8 nhỏ hơn trong mã

Điều đó là bình thường, bởi vì thời gian thực hiện của

// wrong!
setTimeout[sayHi[], 1000];

3 "tiêu tốn" một phần của khoảng thời gian

Có thể quá trình thực thi của

// wrong!
setTimeout[sayHi[], 1000];

3 dài hơn chúng tôi dự kiến và mất hơn 100 mili giây

Trong trường hợp này, động cơ đợi

// wrong!
setTimeout[sayHi[], 1000];

3 hoàn thành, sau đó kiểm tra bộ lập lịch và nếu hết thời gian, hãy chạy lại ngay lập tức

Trong trường hợp cạnh, nếu chức năng luôn thực thi lâu hơn __5_______0 mili giây, thì các cuộc gọi sẽ diễn ra mà không có khoảng dừng nào cả

Và đây là hình ảnh cho

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 lồng nhau

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 lồng nhau đảm bảo độ trễ cố định [ở đây là 100ms]

Đó là bởi vì một cuộc gọi mới được lên kế hoạch vào cuối cuộc gọi trước đó

Thu gom rác và gọi lại setInterval/setTimeout

Khi một chức năng được chuyển vào

let timerId = setTimeout[...];
clearTimeout[timerId];

1, một tham chiếu nội bộ được tạo cho nó và được lưu trong bộ lập lịch. Nó ngăn chức năng bị thu gom rác, ngay cả khi không có tham chiếu nào khác đến nó

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Đối với

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8, hàm này sẽ nằm trong bộ nhớ cho đến khi hàm

let timerId = setTimeout[...];
clearTimeout[timerId];

3 được gọi

Có một tác dụng phụ. Một hàm tham chiếu đến môi trường từ vựng bên ngoài, vì vậy, trong khi nó hoạt động, các biến bên ngoài cũng hoạt động. Chúng có thể chiếm nhiều bộ nhớ hơn chính chức năng đó. Vì vậy, khi chúng ta không cần chức năng đã lên lịch nữa, tốt hơn hết là hủy bỏ nó, ngay cả khi nó rất nhỏ

Có trường hợp sử dụng đặc biệt.

let timerId = setTimeout[...];
clearTimeout[timerId];

4, hoặc chỉ

let timerId = setTimeout[...];
clearTimeout[timerId];

Điều này lên lịch thực hiện

// wrong!
setTimeout[sayHi[], 1000];

3 càng sớm càng tốt. Nhưng bộ lập lịch sẽ gọi nó chỉ sau khi tập lệnh hiện đang thực thi hoàn tất

Vì vậy, chức năng được lên lịch để chạy “ngay sau” tập lệnh hiện tại

Chẳng hạn, điều này xuất ra “Xin chào”, sau đó ngay lập tức “Thế giới”

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Dòng đầu tiên “đặt cuộc gọi vào lịch sau 0ms”. Nhưng bộ lập lịch sẽ chỉ “kiểm tra lịch” sau khi tập lệnh hiện tại hoàn tất, vì vậy,

let timerId = setTimeout[...];
clearTimeout[timerId];

7 là đầu tiên và

let timerId = setTimeout[...];
clearTimeout[timerId];

8 – sau nó

Ngoài ra còn có các trường hợp sử dụng thời gian chờ không chậm trễ liên quan đến trình duyệt nâng cao mà chúng ta sẽ thảo luận trong chương Vòng lặp sự kiện. nhiệm vụ vi mô và nhiệm vụ vĩ mô

Độ trễ bằng không trên thực tế không phải bằng không [trong trình duyệt]

Trong trình duyệt, có giới hạn về tần suất chạy bộ định thời lồng nhau. các nói. “Sau năm bộ hẹn giờ lồng nhau, khoảng thời gian buộc phải ít nhất là 4 mili giây. ”

Hãy chứng minh ý nghĩa của nó với ví dụ dưới đây. Cuộc gọi

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

7 trong đó tự lên lịch lại với độ trễ bằng không. Mỗi cuộc gọi ghi nhớ thời gian thực từ cuộc gọi trước đó trong mảng

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

0. Sự chậm trễ thực sự trông như thế nào?

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

Bộ hẹn giờ đầu tiên chạy ngay lập tức [giống như được viết trong thông số kỹ thuật], và sau đó chúng tôi thấy

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

1. Độ trễ bắt buộc hơn 4 ms giữa các lần gọi bắt đầu phát huy tác dụng

Điều tương tự cũng xảy ra nếu chúng ta sử dụng

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

8 thay vì

function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

4 chạy

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

5 vài lần với độ trễ bằng 0 và sau đó với độ trễ hơn 4 ms

Hạn chế đó có từ thời cổ đại và nhiều chữ viết dựa vào đó, vì vậy nó tồn tại vì lý do lịch sử

Đối với JavaScript phía máy chủ, giới hạn đó không tồn tại và tồn tại các cách khác để lên lịch cho một công việc không đồng bộ ngay lập tức, như đối với Node. js. Vì vậy, ghi chú này dành riêng cho trình duyệt

Các phương pháp

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

6 và

let timerId = setTimeout[[] => alert["never happens"], 1000];
alert[timerId]; // timer identifier

clearTimeout[timerId];
alert[timerId]; // same identifier [doesn't become null after canceling]

7 cho phép chúng tôi chạy

// wrong!
setTimeout[sayHi[], 1000];

3 một lần/thường xuyên sau

function sayHi[phrase, who] {
  alert[ phrase + ', ' + who ];
}

setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John

0 mili giây

Để hủy bỏ việc thực thi, chúng ta nên gọi

let timerId = setInterval[func|code, [delay], [arg1], [arg2], ...]

0 với giá trị được trả về bởi

let timerId = setInterval[func|code, [delay], [arg1], [arg2], ...]

Các cuộc gọi
```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
7 lồng nhau là một giải pháp thay thế linh hoạt hơn cho
```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
8, cho phép chúng tôi đặt thời gian giữa các lần thực hiện chính xác hơn
Lập lịch trình không chậm trễ với
```
let timerId = setTimeout[...];
clearTimeout[timerId];
```
4 [giống như
```
let timerId = setTimeout[...];
clearTimeout[timerId];
```
5] được sử dụng để lên lịch cuộc gọi “càng sớm càng tốt, nhưng sau khi tập lệnh hiện tại hoàn tất”
Trình duyệt giới hạn độ trễ tối thiểu cho năm hoặc nhiều cuộc gọi lồng nhau của
```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
7 hoặc cho
```
function sayHi[] {
  alert['Hello'];
}

setTimeout[sayHi, 1000];
```
8 [sau cuộc gọi thứ 5] là 4 mili giây. Đó là vì lý do lịch sử

Xin lưu ý rằng tất cả các phương pháp lập lịch trình không đảm bảo độ trễ chính xác

Ví dụ: bộ hẹn giờ trong trình duyệt có thể chậm lại vì nhiều lý do

CPU bị quá tải
Tab trình duyệt ở chế độ nền
Laptop đang ở chế độ tiết kiệm pin

Tất cả những điều đó có thể tăng độ phân giải của bộ hẹn giờ tối thiểu [độ trễ tối thiểu] lên 300 mili giây hoặc thậm chí 1000 mili giây tùy thuộc vào cài đặt hiệu suất ở cấp độ hệ điều hành và trình duyệt

Làm cách nào để dừng khoảng thời gian JavaScript sau một thời gian?

Bạn có thể hủy khoảng thời gian bằng cách sử dụng clearInterval[] . Nếu bạn muốn chức năng của mình được gọi một lần sau độ trễ đã chỉ định, hãy sử dụng setTimeout[].

Làm cách nào để dừng hẹn giờ trong JavaScript?

Phương thức clearTimeout[] xóa bộ hẹn giờ được đặt bằng phương thức setTimeout[].

Chúng ta có thể tạm dừng setInterval JavaScript không?

Bạn không thể TẠM DỪNG hàm setInterval , bạn có thể DỪNG chức năng này [ClearInterval] hoặc để nó chạy.

Hàm nào sẽ dừng tiếp tục hàm setInterval?

Phương thức setInterval[] của JavaScript trả về một ID mà phương thức clearInterval[] có thể sử dụng để dừng khoảng thời gian.

Làm cách nào để dừng khoảng thời gian JavaScript sau một thời gian?

Làm cách nào để dừng hẹn giờ trong JavaScript?

Chúng ta có thể tạm dừng setInterval JavaScript không?

Hàm nào sẽ dừng tiếp tục hàm setInterval?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề