时间戳

首页 > 解决方案 > 防止在网页中重复单击按钮

javascript - 防止在网页中重复单击按钮

问题描述

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

1) 以表格形式提交用户数据

2）从谷歌表中读取数据并将其显示在网页上。单击数据库中的数据更新时，此页面上有一个刷新按钮。

问题：- 当用户多次单击提交按钮时，比如说 5 次，相同的数据会被插入 5 次，这是一个大问题。并且在多次单击刷新按钮的情况下，出现“重复键值违反唯一约束”之类的错误

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

标签： javascripthtmldjangoforms

解决方案

您可能希望在单击一次后销毁 eventListener。

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>

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

推荐阅读