Question

单击按钮时我会显示一个通知标签，它可以正常工作，但是如果我多次按下按钮，有时通知会立即消失。

var duration = 3000;

function showNotificationLabel() {
    var date = new Date();
    var time = date.toLocaleTimeString();

    messageLabel.textContent = "Task Complete at " + time;

    setTimeout(() => {
      messageLabel.textContent = "";
    }, duration);
  }

body {
  font: caption;
}

<p>
  <span id="messageLabel"></span>&nbsp;
</p>

<div>
  <button onclick="showNotificationLabel()">Start</button>
</div>

如何确保标签在超时之前不会消失？

Answer 1

这是因为每次单击时，都会使用相同的回调函数来启动新的独立超时。

为避免这种情况，您应清除每次点击的上一次超时：

https://www.w3schools.com/jsref/met_win_cleartimeout.asp

var duration = 3000;
var timeOutRef = null;

function showNotificationLabel() {
    var date = new Date();
    var time = date.toLocaleTimeString();

    messageLabel.textContent = "Task Complete at " + time;

    if(timeOutRef != null) clearTimeout(timeOutRef);

    timeOutRef = setTimeout(() => {
      messageLabel.textContent = "";
    }, duration);
  }

body {
  font: caption;
}

<p>
  <span id="messageLabel"></span>&nbsp;
</p>

<div>
  <button onclick="showNotificationLabel()">Start</button>
</div>

快速呼叫时，显示标签的时间最少

1 个答案: