使用 LocalStorage 单击 X 秒后，Vanilla Javascript 禁用按钮，然后再次启用按钮

Question

你如何在 vanilla javascript 而不是 jQuery 中做这样的事情？

1. 单击按钮提交刷新/重定向到同一页面的表单
2. 页面刷新时，按钮被点击后禁用
3. localStorage 将禁用的按钮存储 X 秒
4. X 秒过后，再次启用禁用的按钮
5. 如果用户再次单击按钮，请再次重复此过程

Answer 1

无法创建 sn-p，因为 stackoverlow 不允许访问 localStorage，但是：

<form onsubmit="handleSubmit(event)">
    <input type="text" id="target" />
    <input type="submit" value="submit"/>
</form>
<script>

  let disable = localStorage.getItem("disable");

  if(disable){
    console.log("5 second timeout");
    setTimeout(()=> {
      localStorage.removeItem("disable");
      disable = false;
      console.log("button enabled");
    },5000);
  }

  function handleSubmit(e) {
    e.preventDefault();
    if(disable){
      console.log("button is disabled"); 
      return;
    }
    localStorage.setItem("disable",true);
    location.reload();    
  }

</script>

编辑：类似下面的内容会针对特定按钮修改它

function handlerWrapper(e) {
    e.preventDefault();
    if(disable){
      console.log("button is disabled"); 
      return;
    }
    yourActualHandler(e); 
    localStorage.setItem("disable",true);
    location.reload();    
  }

Answer 2

除了你提到的localStorage API，你只需要按钮上的disabled 属性和窗口对象上的setTimeout 方法。

请参阅代码内的 cmets 以获得进一步的解释。

（注意：由于沙盒，使用localStorage 的代码无法在 SO sn-ps 中运行，但如果您想看到它运行，可以在文本编辑器中将其保存为 html 文件。）

<button id="refresh">Refresh</button>
<script>
  const refreshBtn = document.getElementById("refresh");
  refreshBtn.addEventListener("click", refresh);
  disable();

  function disable() {
    // If `disableRefresh` is truthy...
    if (localStorage.getItem("disableRefresh")) {
      // ...Disables the button and re-enables it after 2 seconds
      refreshBtn.setAttribute("disabled", ""); // Any value makes it true
      setTimeout(enable, 2000); // JavaScript measures times in milliseconds
    }
  }

  function enable() {
    // Removes (boolean) `disabled` attribute and (string) `disableRefresh` item
    refreshBtn.removeAttribute("disabled");
    localStorage.removeItem("disableRefresh")
  }

  function refresh() {
    // Sets `disableRefresh` to a truthy value, and refreshes the page
    localStorage.setItem("disableRefresh", "yep");
    location = location;
  };
</script>