Javascript 禁用按钮单击的通用代码

我还有一个问题：

我的应用程序包含许多向服务器发出异步请求的按钮，当前，如果用户的速度足够快，可以多次单击按钮-同一请求会执行两次或更多次，并且服务器上的数据会被复制。 在执行请求之前，是否有办法禁用单击的按钮？

有人提出了这个解决方案：

$("input[type='button']")
        .each(function () {
            var el = $(this);
            var onclickFunction = el.attr('onclick'), alreadyChecked = el.attr('clickHandler');

            if (typeof onclickFunction != 'undefined' && typeof alreadyChecked == 'undefined')
            {
                el.removeAttr("onclick");
                el.removeAttr("onclickFunction", onclickFunction);
                el.attr('clickHandler', 'true');
                el.on('click', function()
                {
                    el.attr("disabled", "disabled");
                    $.when(eval(onclickFunction)).then(function () { el.removeAttr('disabled'); })

                })

            }
        });

但如果我理解正确，这段代码只运行一次。因此，如果我的应用程序包含许多视图，则应在每次加载视图时执行此代码

---

还有其他合适的解决方案吗？

我建议使用CSS

类来防止用户多次提交。这还为您提供了灵活性，可以轻松设置禁用按钮的外观样式，例如
样式表中的
颜色
或
不透明度

大概是这样的：

function onClickHandler() {
  var myButton = $(this);

  // check to see if it's already disabled
  if (myButton.hasClass('disabled')) {
    // if so, just exit out
    return;
  }

  // add the disabled class
  myButton.addClass('disabled');

  // continue with your processing...
}

如果浏览器兼容性不是问题，您也可以查看属性，但我个人更喜欢使用
类
两种方式

1） 在页面作用域中使用一个标志（我们称之为requestInProgress），一旦发出请求，该标志就会打开。请求完成后，关闭标志

2） 一旦按钮被禁用，请求将得到处理，以防止用户再次点击该按钮。请求处理完成后启用按钮。
尝试使用
.one（）

如果我没有弄错，您的解决方案也会让我重写所有现有的按钮单击处理程序？@Cheese“如果我没有弄错，您的解决方案也会让我重写所有现有的按钮单击处理程序？”不确定您的意思？您可以将处理程序定义为命名函数而不是匿名函数，用
.one（）
替换
。在（）
上，重新附加
单击
$处的
事件。ajax（）
success或error在我添加的下一个clickin代码中调用与处理程序相同的命名函数我看到我正在将click处理程序包装到一个变量中：var onclickFunction=el.attr（'onclick'）；然后评估它。我是否应该将相同的代码放在“/do ajax stuff”注释所在的示例中？@Cheese
el.attr（'onclick'）
/
onclick函数的文本是什么？使用事件属性onclick的目的是什么？是的，您应该能够将click处理程序定义为一个命名函数，包括处理程序中的ajax
js
；使用
.one（“click”，clickHandler）
我不知道为什么必须使用eval。为什么不能定义函数为JS，而不是将函数源读取为字符串并对其进行分析。
function handleClick(e) {
  // not necessary, though notifies user button is disabled
  $(this).attr("disabled", true); 
  // do ajax stuff
  $.ajax().then(function() {
    $(e.target).removeAttr("disabled")
    // reattach `click` when ajax completes
    .one("click", handleClick)
  })
}

$("input[type='button']").one("click", handleClick)