等到满足条件或在javascript中传递超时

Question

我需要让代码休眠，直到满足某些条件或超过 3 秒超时。然后返回一个简单的字符串。无论如何我可以做到这一点吗？

// this function needs to return a simple string 

function something() { 

    var conditionOk = false;

    var jobWillBeDoneInNMiliseconds = Math.floor(Math.random() * 10000);

    setTimeout(function() {

        // I need to do something here, but I don't know how long it takes
        conditionOk = true; 

    }, jobWillBeDoneInNMiliseconds);


    // I need to stop right here until
    // stop here until ( 3000 timeout is passed ) or ( conditionOk == true )
    StopHereUntil( conditionOk, 3000 );

    return "returned something"; 
}

这就是我要做的：

我让浏览器滚动到页面底部，然后会调用一些 ajax 函数来获取 cmets（我无法控制它）。现在我需要等到 cmets 出现在带有“.comment”类的文档中。

我需要 getComments() 函数将 cmets 作为 json 字符串返回。

function getComments() {

    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

  var a = (document.querySelectorAll('div.comment'))

  // wait here until  (  a.length > 0  ) or ( 3 second is passed )

  // then I need to collect comments
  var comments = [];
  document.querySelectorAll('div.comment p')
    .forEach(function(el){      
        comments.push(el.text());
    });

  return JSON.stringify(comments);
} 

getComments();

Answer 1

我遇到了这个问题，没有一个解决方案令人满意。我需要等到某个元素出现在 DOM 中。所以我接受了hedgehog125的回答并根据我的需要进行了改进。我认为这回答了最初的问题。

async function sleepUntil(f, timeoutMs) {
    return new Promise((resolve, reject) => {
        let timeWas = new Date();
        let wait = setInterval(function() {
            if (f()) {
                console.log("resolved after", new Date() - timeWas, "ms");
                clearInterval(wait);
                resolve();
            } else if (new Date() - timeWas > timeoutMs) { // Timeout
                console.log("rejected after", new Date() - timeWas, "ms");
                clearInterval(wait);
                reject();
            }
        }, 20);
    });
}

用法：

await sleepUntil(() => document.querySelector('.my-selector'), 5000);

Answer 2

您应该能够使用Promise.race 实现此目的。这是一个基本示例：

let promise1 = new Promise(resolve => {
  setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise(resolve => {
  setTimeout(resolve, 800, 'two');
});

async function fetchAndLogResult() {
  let result = await Promise.race([promise1, promise2]);
  console.log(result);
}

fetchAndLogResult();

这是一个替代版本，虽然没有使用async/await，但更简洁：

let promise1 = new Promise(resolve => {
  setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise(resolve => {
  setTimeout(resolve, 800, 'two');
});

Promise.race([promise1, promise2]).then(result => console.log(result));

Answer 3

在 JavaScript 中没有等待的方法。您可以使用 settimeout 或使用 while 循环（请记住，在这种情况下脚本无法运行，然后页面可能会变得无响应）。

设置超时

// this function needs to return a simple string 

function something() { 

    conditionOk = false;

    var jobWillBeDoneInNMiliseconds = Math.floor(Math.random() * 10000);

    timeout = setTimeout(function() {

        // I need to do something here, but I don't know how long it takes
        conditionOk = true; 

    }, jobWillBeDoneInNMiliseconds);


    // I need to stop right here until
    // stop here until ( 3000 timeout is passed ) or ( conditionOk ==     true )

    timeWas = new Date();

    wait = setInterval(function() {
        if (conditionOk) {
            // Communicate what you were trying to return using globals
            clearInterval(wait);
        }
        if (new Date() - timeWas > 3000) { // Timeout
            // Clear this interval
            clearInterval(wait);
        }
    }, 30);
}

同时

// this function needs to return a simple string 

function something() { 

    conditionOk = false;

    var jobWillBeDoneInNMiliseconds = Math.floor(Math.random() * 10000);

    timeout = setTimeout(function() {

        // I need to do something here, but I don't know how long it takes
        conditionOk = true; 

    }, jobWillBeDoneInNMiliseconds);


    // I need to stop right here until
    // stop here until ( 3000 timeout is passed ) or ( conditionOk ==     true )

    timeWas = new Date();

    while ((! conditionOk) && (! (new Date() - timeWas > 3000))) { // 3000 = the delay
        // Do nothing
    }
    if (conditionOk) {
        return "returned something";
    }
    else {
        return "returned nothing";
    }
}

您可能还想看看这个问题：JavaScript sleep/wait before continuing

希望这会有所帮助！

Answer 4

当我在寻找类似的解决方案时，我在浏览器中打开了这个问题。可能帖子作者不再需要它了，但这里有来自非事件循环世界（php、java、python）的其他人。

这是我在阅读 MDN 后得到的： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

这两个描述了需要什么。为此，您将需要一些辅助函数。它看起来臃肿，但似乎在 JS 中没有其他方法。虽然完成了工作:)

// sleep helper
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

// func that will check your condition
function checkCondition(number) {
    if (number == 5) return true;
    else return false;
}

// helper that will wait and then check the condition
// await halts the execution flow until sleep is resolved
// this is the part that you need
async function waitOneSecondAndCheckCondition(number) {
    const v = await sleep(500);
    return checkCondition(number);
}

// since most likely you want to poll the checkCondition
// and not waste all the time waiting
// this polls conditon every half a second
// and in the end return a simple string
// either when condition is met or after three seconds
async function waitUntilConditionIsMetOrTimeoutIsPassed() {
    for (let i = 0; i < 6; i++) {
        let result = await waitOneSecondAndCheckCondition(i);
        console.log("i is: " + i + " condition result is: " + result);
        if (!result) continue;
        else break;
    }
}

waitUntilConditionIsMetOrTimeoutIsPassed();

如果在 3 秒内的某个时间点满足条件，则控制台输出：

i is: 0 condition result is: false
i is: 1 condition result is: false
i is: 2 condition result is: false
i is: 3 condition result is: true
a simple string

发生超时时的控制台输出：

i is: 0 condition result is: false
i is: 1 condition result is: false
i is: 2 condition result is: false
i is: 3 condition result is: false
i is: 4 condition result is: false
i is: 5 condition result is: false
a simple string

希望这对你们所有像我一样的 JS 新手有帮助 :)

Answer 5

如果你想等到一个条件满足：

main();

async function main() {
  let foo = 0;
  // for demo purposes, artificially increment foo
  setInterval(() => foo++);
  console.log('Waiting until foo reaches 1337 ...');
  await until(() => foo === 1337);
  console.log('foo === ' + foo);
}

function until(condition) {
  return new Promise((resolve) => {
    const interval = setInterval(() => {
      if (condition()) {
        clearInterval(interval);
        resolve();
      }
    });
  });
}

如果你想等到一定时间过去：

main();

async function main() {
  console.log('Waiting 2 seconds ...');
  await milliseconds(2_000);
  console.log('Done!');
}

function milliseconds(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

Answer 6

好的，因为您使用的是ajax，您可以执行以下操作：

var eventEmitter = new EventEmitter()
eventEmitter.on('myEvent', myFunction)

$.ajax(...).then(function() {
  eventEmitter.emit('myEvent', {state: true})
})

setTimeout(function() { eventEmitter.emit('myEvent', {state: false}), 3000);

function myFunction() {
   //you can do your checks inside here
}

你的 ajax 不使用 jQuery:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'myservice/username?id=some-unique-id');
xhr.onload = function() {
  if (xhr.status === 200) {
    eventEmitter.emit('myEvent', {state: true})
  }
  else {
    alert('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();