javascript - 防止重复点击网页中的按钮

Question

我目前正在构建一个 Django 应用程序，到目前为止我已经实现了两个功能。

1)以表单提交用户数据

2)从googlesheet中读取数据并显示在网页上。此页面上有一个刷新按钮，单击后数据库中的数据就会更新。

问题:- 当用户多次单击提交按钮(比如说 5 次)时，相同的数据会被插入 5 次，这是一个很大的问题。如果多次单击刷新按钮，我会收到类似“重复键值违反唯一约束”的错误

因此，请建议我一种方法，使按钮不会多次执行，以防止重复并处理任何极端情况。

Answer 1

当事件监听器被点击一次时，您可能想销毁它。

function oneTimeEvent(element, eventType, callback) {
   element.addEventListener(eventType, function(e) {
   e.target.removeEventListener(e.type, arguments.callee);
   return callback(e);
 });
}

var btn = document.querySelector('button');
  oneTimeEvent(btn, 'click', function () {
  alert('Hello there! Did you click on me?');
});


<button>Click</button>

当用户点击刷新按钮时，可以重新加载页面，并且事件监听器将被重新设置。