运行仅在一定时间内使用 Javascript 的功能（无 jQuery）

Question

我是新手

如何在设定的时间内调用一个函数，比如 3000 毫秒？我试过 setInterval 和 setTimeout 但它们不起作用。

if (budgeting === '' || budgeting.indexOf('e') > -1 || budgetValue < 0) {
  let errorHandler = document.createElement('div');
  let textErrorHandler = document.createTextNode('Oops! The balance you entered is invalid. Try again!')
  errorHandler.style.width = '500px';
  errorHandler.style.height = '20px';
  errorHandler.style.background = 'coral';
  errorHandler.style.float = 'left';
  errorHandler.appendChild(textErrorHandler);
  document.body.append(errorHandler);
}

以上是我目前的代码。我想要做的是显示一个错误消息框 3 秒（3000 毫秒），但我希望它只在每次发生错误时显示，即只显示一次。

Answer 1

此代码可以工作：

setInterval(() => {console.log("work")}, 3000);

Answer 2

显示错误时，设置一个超时时间，间隔一段时间后再次隐藏。设置超时的时候如果有超时运行，清除掉再重新设置

下面是一个基本的实现。 “显示错误”按钮可以根据需要点击多次，它只会显示一条消息，一次只设置一个超时时间，并且只会在最后一次点击后的指定时间间隔内停留：

let showError = (() => {
  let timeoutID;
  return () => {
    let el = document.getElementById('err0');
    el.style.visibility = 'visible';
    // Clear timeout if one might be running
    if (timeoutID) clearTimeout(timeoutID);
    // Set timer for 1,000 ms (1 second), clear timeoutID when finished
    timeoutID = setTimeout(()=>{
      el.style.visibility = 'hidden'; 
      timeoutID = null;
    }, 1000);
  };
})();

#err0 {
  visibility: hidden;
  color: red;
}

<button onclick="showError()">Show error</button>
<span id="err0">Error</span>

运行仅在一定时间内使用 Javascript 的功能（无 jQuery）

Run a function only for a set amount of time with Javascript (no jQuery)

javascript

time

date

function

运行 仅在一定时间内使用 Javascript 的功能（无 jQuery）

Run a function only for a set amount of time with Javascript (no jQuery)

javascript

time

date

function

运行仅在一定时间内使用 Javascript 的功能（无 jQuery）