Tham số thứ hai mà hàm
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
3 lấy là độ trễ mà sau đó chúng ta muốn gọi hàm [tính bằng mili giây]Hàm trong ví dụ được gọi sau
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
4 [một giây]Bước đầu tiên là truy cập vào phần tử DOM mà bạn muốn ẩn sau một khoảng thời gian trễ. Chúng tôi đã sử dụng phương pháp
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
5 trong ví dụĐể ẩn phần tử, chúng tôi đặt thuộc tính CSS hiển thị của nó thành
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
6. Tuy nhiên, bạn có thể cần thuộc tính khả năng hiển thị tùy thuộc vào trường hợp sử dụng của bạnKhi thuộc tính
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
7 của phần tử được đặt thành function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
6, phần tử đó sẽ bị xóa khỏi DOM và không ảnh hưởng đến bố cục. Tài liệu được hiển thị như thể phần tử không tồn tạiMặt khác, khi thuộc tính
Box
Hide Box after delay
1 của phần tử được đặt thành
Box
Hide Box after delay
2, thuộc tính này vẫn chiếm dung lượng trên trang, tuy nhiên phần tử này ẩn [không được vẽ]Phần tử vẫn ảnh hưởng đến bố cục trên trang của bạn như bình thường
Dưới đây là một ví dụ sử dụng thuộc tính
Box
Hide Box after delay
1 để ẩn phần tử sau vài giâyMặc dù phần tử trở nên vô hình nhưng nó vẫn chiếm dung lượng trên trang. Đây là sự khác biệt giữa cài đặt
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
7 thành function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
6 và
Box
Hide Box after delay
1 thành
Box
Hide Box after delay
2 Để tự động đóng cảnh báo, hãy đặt phương thức
Box
Hide Box after delay
01 để đóng cảnh báo sau một thời gian nhất định. nó sẽ hiển thị cảnh báo tự động đóng trên một trangTrong hướng dẫn này, hãy tìm hiểu cách tạo ví dụ tự động đóng cảnh báo bootstrap
Tất cả các ứng dụng web hiện đại đều sử dụng
Box
Hide Box after delay
02 để hiển thị thông báo cho người dùng. Các
Box
Hide Box after delay
02 này có một nút đóng để đóng chúng hoặc có thể đóng tự động bằng Twitter Bootstrap. Trong bài đăng này, chúng tôi sẽ tạo tự động đóng
Box
Hide Box after delay
02 bằng twitter Bootstrap 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ó
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 gianfunction sayHi[] { alert['Hello']; } setTimeout[sayHi, 1000];
8 cho phép chúng ta chạy lặp đi 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 đófunction sayHi[] { alert['Hello']; } setTimeout[sayHi, 1000];
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
setTimeout
cú pháp
let timerId = setTimeout[func|code, [delay], [arg1], [arg2], ...]
Thông số
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
9Hàm 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
1, function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
2…Đối số cho hàmChẳ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âyfunction 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
Box
Hide Box after delay
5Như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
Box
Hide Box after delay
6Vượ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 _______94 sau hàm
Box
Hide Box after delay
8Điều đó không hiệu quả, vì
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
7 mong đợi một tham chiếu đến một hàm. 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 thi của nó được chuyển cho 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ịchHủy với ClearTimeout
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 hẹn giờ”
Box
Hide Box after delay
51 mà chúng tôi có thể sử dụng để hủy thực thiCú pháp để hủy bỏ
Box
Hide Box after delay
6Trong 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
Box
Hide Box after delay
7Như chúng ta có thể thấy từ đầu ra
Box
Hide Box after delay
52, 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ổ sungMộ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 phần bộ hẹn giờ của HTML Living Standard
setInterval
Phương thức
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
8 có cùng cú pháp với function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
7
Box
Hide Box after delay
1Tấ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
Box
Hide Box after delay
56Ví dụ sau sẽ hiển thị thông báo cứ sau 2 giây. Sau 5 giây, đầu ra bị dừng
Box
Hide Box after delay
4Thời gian tiếp tục trong khi
Box
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ị
Box
Hide Box after delay
58Vì vậy, nếu bạn chạy đoạn mã trên và không bỏ qua cửa sổ
Box
Hide Box after delay
52 trong một thời gian, thì cửa sổ
Box
Hide Box after delay
52 tiếp theo sẽ được hiển thị ngay lập tức khi bạn làm điều đó. Khoảng thời gian thực tế giữa các cảnh báo sẽ ngắn hơn 2 giâySetTimeout lồng nhau
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àyfunction sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
0function 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
Box
Hide Box after delay
64function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
7 lồng nhau là một phương pháp linh hoạt hơn 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ạiChẳ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];
1Và 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];
8Hãy so sánh hai đoạn mã. Cái đầu tiên sử dụng
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
8function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
2Cái thứ hai sử dụng lồng nhau
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
7function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
3Đối với
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
8, bộ lập lịch nội bộ sẽ chạy
Box
Hide Box after delay
82 cứ sau 100 mili giâyBạn có để ý không?
Độ trễ thực giữa các cuộc gọi
Box
Hide Box after delay
83 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
Box
Hide Box after delay
83 “tiêu tốn” một phần của khoảng thời gianCó thể quá trình thực thi của
Box
Hide Box after delay
83 dài hơn chúng tôi dự kiến và mất hơn 100 mili giâyTrong trường hợp này, động cơ đợi
Box
Hide Box after delay
83 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ứcTrong trường hợp Edge, nếu chức năng luôn thực thi lâu hơn
function sayHi[phrase, who] {
alert[ phrase + ', ' + who ];
}
setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
0 ms, 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 nhaufunction 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
Box
Hide Box after delay
61, 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];
4Đối với
function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
8, chức năng sẽ ở trong bộ nhớ cho đến khi
Box
Hide Box after delay
63 được gọiCó 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ỏ
Đặt thời gian chờ bằng 0
Có trường hợp sử dụng đặc biệt.
Box
Hide Box after delay
64, hoặc chỉ
Box
Hide Box after delay
65Điều này lên lịch thực hiện
Box
Hide Box after delay
83 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ấtVì 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];
5Dò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,
Box
Hide Box after delay
67 là đầu tiên và
Box
Hide Box after delay
68 – sau nóNgoài ra còn có các trường hợp sử dụng thời gian chờ không độ 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. Mức sống HTML 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
Box
Hide Box after delay
70. Sự chậm trễ thực sự trông như thế nào? function sayHi[] {
alert['Hello'];
}
setTimeout[sayHi, 1000];
6Bộ 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
Box
Hide Box after delay
71. Độ 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ự 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];
7.
Box
Hide Box after delay
74 chạy
Box
Hide Box after delay
75 vài lần với độ trễ bằng 0 và sau đó với độ trễ hơn 4 msHạ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ư setImmediate cho Node. js. Vì vậy, ghi chú này dành riêng cho trình duyệt
Tóm lược
- Các phương thức
76 vàBox
Hide Box after delay
77 cho phép chúng tôi chạyBox
Hide Box after delay
83 một lần/thường xuyên sauBox
Hide Box after delay
0 mili giâyfunction sayHi[phrase, who] { alert[ phrase + ', ' + who ]; } setTimeout[sayHi, 1000, "Hello", "John"]; // Hello, John
- Để hủy thực thi, chúng ta nên gọi
10 với giá trị được trả về bởiBox
Hide Box after delay
11Box
Hide Box after delay - Các lệnh gọi
7 lồng nhau là một giải pháp thay thế linh hoạt hơn chofunction 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ơnfunction sayHi[] { alert['Hello']; } setTimeout[sayHi, 1000];
- Lập lịch không trễ với
64 [giống nhưBox
Hide Box after delay
65] đượ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”Box
Hide Box after delay - 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
7 hoặc chofunction 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ửfunction sayHi[] { alert['Hello']; } setTimeout[sayHi, 1000];
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ể làm 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