Question

我有下一期：

我的应用程序包含许多向服务器发出异步请求的按钮，目前如果用户足够快以单击按钮多次 - 同一请求执行两次或更多次并且服务器上的数据会重复。 有没有办法禁用点击按钮，直到执行请求？

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

$("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'); })

                })

            }
        });

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

还有更合适的解决方案吗？

Answer 1

两种方式。

1）在请求发出后打开的页面范围中使用一个标志（让我们称之为requestInProgress）。请求完成后，请关闭标记。

2）按钮请求处理后禁用按钮，以防止用户再次敲击按钮。请求处理完成后启用按钮。

Answer 2

尝试使用.one()

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)

Answer 3

我建议使用CSS class来防止用户多次提交。这也为您提供了轻松设置残障按钮外观样式的灵活性，例如color中的opacity或stylesheet。

这样的事情：

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...
}

如果浏览器兼容性不是问题，您还可以查看disabled属性，但我个人更喜欢使用class。

通用代码禁用按钮onclick

3 个答案: