如何实现Materialize.toast仅显示一次？

这个问题我之前做项目的时候也遇到过，频繁点按钮弹出一堆堆叠的toast确实很影响体验，给你分享两个实用的解决思路：

方法一：用状态变量控制触发时机 #

定义一个变量来跟踪当前是否有toast处于显示状态，只有当没有活跃toast时才触发新的提示，toast消失后再重置状态：

// 初始化状态：当前无活跃toast
let isToastActive = false;

// 封装弹出toast的函数
function showToast(message) {
  if (!isToastActive) {
    isToastActive = true;
    Materialize.toast(message, 3000, '', function() {
      // toast动画结束、关闭后，重置状态
      isToastActive = false;
    });
  }
}

// 按钮点击事件绑定
document.querySelector('#your-button').addEventListener('click', () => {
  showToast('这是你的提示内容');
});

这个方法逻辑简单直观，适合大多数场景，而且不会依赖DOM结构的变化。

方法二：通过DOM检查判断活跃toast #

Materialize的toast会被渲染到.toast-container容器中，活跃的toast不会带有fadeOut类（消失时会添加这个类做动画），我们可以直接通过DOM选择器判断是否有正在显示的toast：

function showToast(message) {
  // 查找当前未消失的活跃toast
  const activeToast = document.querySelector('.toast-container .toast:not(.fadeOut)');
  // 如果没有活跃toast，再弹出新的
  if (!activeToast) {
    Materialize.toast(message, 3000);
  }
}

这个方法不需要额外维护状态变量，直接通过DOM元素的状态来判断，适合不想额外声明变量的场景。

框架中的适配（以Vue为例） #

如果是在Vue这类框架中使用，可以把状态变量放到组件的data中，逻辑和方法一一致：

<template>
  <button @click="showToast">点击弹出提示</button>
</template>

<script>
export default {
  data() {
    return {
      isToastActive: false
    }
  },
  methods: {
    showToast() {
      if (!this.isToastActive) {
        this.isToastActive = true;
        Materialize.toast('Vue项目中的提示内容', 3000, '', () => {
          this.isToastActive = false;
        });
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者blg2