Отображение метки для минимального количества перерывов при быстром вызове

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>