javascript - 如何使用计时器删除通知但仍保留删除按钮

Question

这是我目前的代码，我使用的是 Javascript、Vue.js。

Messages.length 是我拥有的消息数组。当您单击 x 时，它会触发“clearMessages(item)”，这是我在服务器端的一个函数，但我还想创建一个在通知停留超过 10 秒时调用该函数的函数。

<div v-if="messages.length">
   <div class="notification is-success">
       <p v-for="item in messages">{{ item }}</p>
        <a @click="clearMessage(item)" class="delete"></a>
   </div>
</div>

Answer 1

您可以在任何向数组添加消息的函数中使用setTimeout:

function addMessage(message) {
  messages.push(message);
  setTimeout(() => clearMessage(message), 10000);
}