运行 javascript 函数并在 5 秒或满足条件后停止

Run javascript function and stop either after 5 seconds or condition is met?

本文关键字：条件 满足 函数 javascript 运行      更新时间：2023-09-26

我需要编写一个纯JavaScript函数，该函数将仅执行5秒，并在以下任一条件（以先到者为准）时停止

  1. 5 秒已过去
  2. 用户输入的字段

我只能做条件 2，但无法弄清楚如何在 5 秒后中断循环：

function beginScanningForItemVer2(){
    var userInput= false;
    var element;
    while (!userInput){
        element = document.getElementById("input").value;
        if (element != null){
            userInput= true;
        }
    }
}

编辑：

谢谢大家帮助我。请继续帮助我...似乎我无法使用 while 循环来检测用户输入，因为我的 CPU 使用率在循环中上升得非常快。有没有办法同时完成这两个目标？请帮助我

Javascript 往往非常面向回调，因为默认情况下，页面上的所有 Javascript 都在单个线程中运行，这意味着当其他代码忙于运行时，UI 没有响应。因此，与其在函数中循环并在每个循环中查找输入，不如注册一个回调函数，该函数将在输入元素发生更改时调用 - 例如，每当元素的值更改时，onchange侦听器将运行您的回调。您可以在 5 秒后取消注册此回调，以阻止在用户在 5 秒后输入内容时发生任何事情。

稀疏示例（参考 http://www.w3schools.com/jsref/event_onchange.asp）：

// Set a function to be called when the value of the input element changes.
object.onchange = function() { 
  valueAfterChange = document.getElementById("input").value;
  // Do something with valueAfterChange.
}
// window.setInterval calls a function after a set delay.
window.setInterval(function() { 
  object.onchange = null;
  // Anything else you might want to do after 5 seconds.
}, 5000);   // Call this function after 5000 milliseconds == 5 seconds.

如果这仍然是一个活动问题，也许你可以试试这个：

const endTime = Date.now() + 5000; // set your cutoff
const scanning = setInterval(() => {
    const element = document.getElementById('input').value;
    if (element) {
        clearInterval(scanning);
    }
    if (endTime < Date.now()) {
        clearInterval(scanning);
    }
}, 1000 /* interval in ms */)

设置间隔以每秒扫描一次（或按所需频率扫描），然后可以设置条件，以便在间隔超过 5 秒标记时停止间隔。

Eddited

您可以将setInterval和setTimeout结合起来来解决.您的代码将如下所示。

var interval = setInterval(function() {
    var userInput= false;
    var element;
    while (!userInput){
        element = document.getElementById("input").value;
        if (element != null){
            userInput= true;
        }
    }
}, 1000);
setTimeout(function() {
    clearInterval(interval);
}, 5000)

您可以在此处查看更多信息。干杯。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers

相关文章：