Khi sử dụng hàm JavaScript setTimeout[], bạn có thể chỉ định hàm gọi lại sẽ được thực thi khi hết thời gian chờ
Ví dụ
setTimeout[myFunction, 3000];
function myFunction[] {
tài liệu. getElementById["bản trình diễn"]. internalHTML = "Anh yêu em. ";
}
Tự mình thử »
Trong ví dụ trên, myFunction được sử dụng như một cuộc gọi lại
myFunction được chuyển đến setTimeout[] như một đối số
3000 là số mili giây trước khi hết thời gian, do đó, myFunction[] sẽ được gọi sau 3 giây
Ghi chú
Khi bạn chuyển một hàm làm đối số, hãy nhớ không sử dụng dấu ngoặc đơn
Đúng. setTimeout[myFunction, 3000];
Sai. setTimeout[myFunction[], 3000];
Thay vì chuyển tên của một hàm làm đối số cho một hàm khác, thay vào đó, bạn luôn có thể chuyển toàn bộ hàm
Ví dụ
setTimeout[function[] { myFunction["Anh yeu em. "]; }, 3000];
function myFunction[value] {
tài liệu. getElementById["bản trình diễn"]. innerHTML = giá trị;
}
Tự mình thử »
Trong ví dụ trên, function[]{ myFunction["I love You !!!"]; } được sử dụng như một cuộc gọi lại. Nó là một chức năng hoàn chỉnh. Hàm hoàn chỉnh được chuyển đến setTimeout[] làm đối số
3000 là số mili giây trước khi hết thời gian, do đó, myFunction[] sẽ được gọi sau 3 giây
Đang chờ khoảng thời gian
Khi sử dụng hàm JavaScript
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {10, bạn có thể chỉ định hàm gọi lại sẽ được thực thi cho mỗi khoảng thời gian
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
Ví dụ
setInterval[myFunction, 1000];
function myFunction[] {
let d = new Date[];
tài liệu. getElementById["bản trình diễn"]. innerHTML=
d. getHours[] + ". " +
d. getMinutes[] + ". " +
d. getSeconds[];
}
Tự mình thử »
Trong ví dụ trên, myFunction được sử dụng như một cuộc gọi lại
myFunction được chuyển đến
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {10 như một đối số
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
1000 là số mili giây giữa các khoảng thời gian, do đó, myFunction[] sẽ được gọi mỗi giây
Các lựa chọn thay thế gọi lại
Với lập trình không đồng bộ, các chương trình JavaScript có thể bắt đầu các tác vụ chạy dài và tiếp tục chạy song song các tác vụ khác
Tuy nhiên, các chương trình không đồng bộ rất khó viết và khó gỡ lỗi
Do đó, hầu hết các phương thức JavaScript không đồng bộ hiện đại không sử dụng lệnh gọi lại. Thay vào đó, trong JavaScript, lập trình không đồng bộ được giải quyết bằng Promises
Công cụ JavaScript là một luồng đơn và sử dụng một vòng lặp sự kiện. Nói một cách đơn giản, điều này có nghĩa là bất kỳ câu lệnh nào bạn chạy sẽ được thực hiện lần lượt trong một quy trình. Để tránh chặn cuộc gọi, có một số kỹ thuật mà JavaScript sử dụng để tránh phải chờ đợi trong khi tính toán. Đây là các chức năng không đồng bộ
Bạn có thể đọc thêm về vòng lặp sự kiện tại đây vì chủ đề quá sâu để trình bày trong bài đăng này
JavaScript cung cấp ba phương thức xử lý mã không đồng bộ. gọi lại, cho phép bạn cung cấp các chức năng để gọi sau khi phương thức không đồng bộ chạy xong;
gọi lại
Phương pháp ban đầu để xử lý tính không đồng bộ. Gọi lại cho phép bạn cung cấp một chức năng sẽ được thực thi sau khi mã không đồng bộ kết thúc. Trong ví dụ bên dưới,
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {6 lấy một hàm làm đối số và sẽ gọi hàm đó khi hoàn thành
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
Phương pháp này, chuyển qua lại các hàm, có thể trở nên rất khó hiểu nếu bạn cần xâu chuỗi một số lệnh gọi này lại với nhau. Cuộc gọi lại sẽ cần được chuyển xuống chuỗi thực thi để được gọi ở cuối quy trình cuối cùng
const functionWithACallback = [callback] => {
//do some work then call the callback once done
console.log['You called this function!'];
setTimeout[[] => {
callback['I am done'];
}, 1000]
};const myFunction = [] => {
// the function we want to call when the work is done
const myCallback = console.log // this will call myCallback once it is finished
functionWithACallback[myCallback];
};myFunction[];
// You called this function
// I am done
lời hứa
Một trong những vấn đề chính với các cuộc gọi lại là, khi xâu chuỗi một số lệnh gọi hàm lại với nhau, việc theo dõi luồng thực thi có thể trở nên khó khăn hơn. Các lời hứa nhằm mục đích giải quyết vấn đề này bằng cách cho phép bạn kết hợp các lời hứa với nhau bằng cú pháp
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {7. Ví dụ bên dưới hoạt động giống như ví dụ gọi lại, nhưng dễ theo dõi hơn nhiều. đợi cho đến khi
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {8 hoàn thành rồi gọi hàm chứa
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {9
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
Xử lý lỗi với lời hứa cũng ít phức tạp hơn. Thay vì gọi cuộc gọi lại với một đối tượng lỗi, các lời hứa cung cấp một trình bao bọc
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {0 để giúp quản lý các trạng thái lỗi. Bên dưới, khối
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {1 sẽ được thực thi nếu xảy ra lỗi trong bất kỳ lời hứa nào ở trên nó
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
Không đồng bộ/Đang chờ
Trong các phiên bản JavaScript gần đây hơn, các từ khóa
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {2 và
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {0 đã được thêm vào. Điều này cung cấp một phương pháp viết lời hứa rõ ràng hơn và cho phép người dùng kiểm soát nhiều hơn đối với thứ tự thực hiện. Ví dụ dưới đây giống với ví dụ về lời hứa về chức năng, nhưng được viết bằng từ khóa
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {2 và
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}
const getPromise = [] => Promise.resolve['My return value'];const myFunction = [] => {0
getPromise[]
.then[val => {
console.log[val]; // prints 'My return value'
}] // If there is an error in any of the above promises, catch
// it here
.catch[error => {
console.error[error.message];
}];
}