javascript - 设置显示时长

Question

我有一个 HTML 代码，例如

<button id="save" onclick="save_options()">Save</button>

<div id="status"></div>` 

和一段 javascript，例如

function save_options() {
  var api = document.getElementById('wptk').value;
    chrome.storage.sync.set({
    savedApi: api,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'OK! API Key saved!';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

document.getElementById('save').addEventListener('click', save_options);

单击按钮后，div id="status" 会在 750 毫秒后出现一条消息 OK! API key 已保存!。没关系。

但是消息消失得非常快! - 我如何定义消息的显示持续时间？

Answer 1

您将在 750 毫秒后清除状态。将其更改为 5 秒。

setTimeout(function() {
      status.textContent = '';
    }, 5000);

如果您想延迟显示消息，则需要在 750 毫秒后设置消息，设置另一个计时器，然后清除它。

// Update status to let user know options were saved.
var status = document.getElementById('status');

setTimeout(function() {
  status.textContent = 'OK! API Key saved!';
  setTimeout(function() {
    status.textContent = ''
  }, 5000);
}, 750);