Materialize Stepper双击返回按钮导致内容空白问题求助

Materialize Stepper 原生的previousStep方法没有做边界校验和防抖处理，当你处于第2步时双击返回按钮，第一次点击会触发步骤回退到第1步的逻辑，此时组件的当前步骤状态还未完成更新，第二次点击会继续触发回退逻辑，尝试跳转到不存在的索引为-1的步骤，最终导致组件所有步骤内容的display属性被错误设置为none，出现页面全白的问题。

以下三个方案均可独立解决该问题，可根据项目实际情况选择：

• 方案1：给返回按钮添加防抖逻辑，限制300ms内仅能触发一次返回操作

// 防抖工具函数
function debounce(func, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖函数包裹原有的返回按钮点击逻辑
document.querySelector('.previous-step').addEventListener('click', debounce(() => {
  // 保留原有返回步骤调用逻辑
  stepper.previousStep();
}))

• 方案2：修改Stepper源码，在previousStep方法中增加边界校验
  找到Stepper库中previousStep方法的定义，在逻辑最开头添加边界判断，当前已经是第一步时直接终止执行：

previousStep() {
  // 新增边界校验逻辑
  if (this.activeStepIndex <= 0) return;
  // 下方保留原有的方法逻辑
  ...
}

• 方案3：步骤切换过程中禁用操作按钮，避免重复触发
  在触发步骤切换时先禁用所有操作按钮，等步骤切换动画完成后再恢复按钮可用状态：

// 监听步骤切换开始事件，禁用按钮
stepper.$el.on('stepper:stepchanging', () => {
  document.querySelectorAll('.stepper .btn').forEach(btn => btn.disabled = true);
})
// 监听步骤切换完成事件，恢复按钮可用
stepper.$el.on('stepper:stepchanged', () => {
  document.querySelectorAll('.stepper .btn').forEach(btn => btn.disabled = false);
})

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