Question

情况就是这样，我之前已经问过这个问题了，但我仍然没有像我想的那样开始工作。

我有一个复杂的函数附加到一个发出AJAX调用的click事件，然后在一个模态对话框中显示该信息。

虽然我的例子是使用jQuery mobile，但我需要通过本机JavaScript工作，因为我有使用jQuery移动设备的移动设备和不使用任何jQuery的桌面设备。这不是我喜欢的，但它也不受我的控制。

所以，您可以在此JSFiddle看到我的示例。对于此示例，我只是使用超时来模拟我遇到的问题。如果您多次单击该链接，它将多次触发该事件。我需要防止这种行为。我已经尝试了event.preventdefault并删除了eventlistener和其他一些东西，但我似乎无法重新附加onclick。因此，一旦关闭对话框，用户就无法重新使用该链接。我想尝试将这些全部包装成单个函数，因为如果可能的话，呈现此对话框的方式。

我正在寻找一个简单而优雅的解决方案，而我在解决这个问题方面遇到了问题。

任何人都可以提供一些解决方案吗？

Answer 1

您可以使用标志来控制点击行为

实施例

var inProgress = false;
function showDialog() {
    inProgress = false;
    $.mobile.changePage("#dialog", {transition:"pop"});
}

function callDialog() {
    if(inProgress){
        return;
    }
    inProgress = true;
    setTimeout(showDialog, 1000);
}

演示：Fiddle

Answer 2

更新你的小提琴，基本上只需在点击后删除onclick处理程序，然后在完成后重新添加

function callDialog() {
    console.log("been clicked");
    var anchor = document.getElementById("dosomethinganchor");           
    anchor.onclick = null;       // remove onclick function
    setTimeout(function () {
        anchor.onclick = callDialog;   //  got response back, make sure we add onclick back
        showDialog();
    }, 1000);
}

http://jsfiddle.net/rvuZ6/8/

如何防止onclick事件多次触发？

2 个答案: