设定显示时间

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 saved!。没关系。

但是消息很快消失了！ -如何定义消息的显示持续时间？

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);