代码之家 › 专栏 › 技术社区 › Lone Learner

在两个或多个事件发生后运行JavaScript函数?

callback javascript

Lone Learner · 技术社区 · 6 年前

我的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 .

一文1 和具有 setTimeout 可以有任何异步调用回调的实现。

有什么JavaScript概念可以让我确保 工作() 使用我在中实现的检查和重试机制硬编码 workInvoker() ?

3 回复 | 直到 6 年前

Felix Kling 6 年前

打个电话就行了 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()
    }
  }
}

Amadan 6 年前

我开始写菲利克斯写的东西。所以+1。:D如果使用查找对象而不是局部变量,则会更短,但这是手动方法。

Promise.all ,假设您的回拨已被承诺:

Promise.all(
  promiseOfEvent1,
  promiseOfEvent2,
  promiseOfWindowLoad
).then(results => {
  work();
})

例如。

const promiseOfWindowLoad = new Promise(function(resolve, reject) {
  window.onload = resolve;
});

Shamama Kamal 6 年前

您可以使用计数器变量,每次调用三个函数中的一个时,计数器变量都会增加1。当计数器的值达到3U时,可以执行work()函数,即,如果counter==3,则执行函数workInvoker(),否则将不执行。

或者如果这些函数中的任何一个被调用,则u可以将其在global中的对应索引值更新1。然后,即使其调用了mutliple times,也只保留索引值为1。