我的 HTML 页面:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<script src="foo.js"></script>
</head>
<body>
<p>Foo</p>
</body>
</html>
脚本foo.js:
function onEvent1(callback) {
console.log('registered callback for first event')
setTimeout(callback, 1000)
}
function onEvent2(callback) {
console.log('registered callback for second event')
setTimeout(callback, 2000)
}
function work() {
console.log('work done')
}
function main() {
var event1Done = false
var event2Done = false
var windowLoadDone = false
onEvent1(function () {
event1Done = true
console.log('first event done')
})
onEvent2(function () {
event2Done = true
console.log('second event done')
})
window = {}
window.onload = function() {
windowLoadDone = true
console.log('window load done')
}
function workInvoker() {
// check
if (event1Done && event2Done && windowLoadDone) {
work()
} else {
// retry
setTimeout(workInvoker, 1000)
}
}
workInvoker()
}
main()
我正在尝试做的事情:确保 work() 仅在三个之后运行
已发生事件:onEvent1、onEvent2 和 window.onload。
我已经使用 setTimeout 实现了 onEvent1 和 onEvent2 但它
可以有任何异步调用回调的实现。
是否有任何 JavaScript 概念可以让我确保 work()
在这三个事件发生后自动调用，而我没有
使用我已经实现的检查和重试机制对其进行硬编码
workInvoker()？
最佳答案
只需在每个事件上调用 workInvoker 即可？
function main() {
var event1Done = false
var event2Done = false
var windowLoadDone = false
onEvent1(function () {
event1Done = true
console.log('first event done')
workInvoker()
})
onEvent2(function () {
event2Done = true
console.log('second event done')
workInvoker()
})
window = {}
window.onload = function() {
windowLoadDone = true
console.log('window load done')
workInvoker()
}
function workInvoker() {
// check
if (event1Done && event2Done && windowLoadDone) {
work()
}
}
}
关于javascript - 让 JavaScript 函数在两个或多个事件发生后运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53076965/