javascript - 在异步任务完成之前，如何防止 onclick 事件多次触发？

Question

我有一个复杂的函数附加到单击事件，该函数进行 AJAX 调用，然后在模式对话框中显示该信息。当 AJAX 调用正在处理时，链接仍然处于事件状态，因此多次按下它会导致显示多个 AJAX 调用和多个对话框。我需要防止这种行为，因此在对话框显示之前多次单击链接只会导致一次 AJAX 调用和对话框显示一次。

您可以在下面和 JSFiddle 查看我的示例.对于这个例子，AJAX 调用被模拟为超时。如果您在对话框显示之前多次单击“这应该做某事”链接，它将多次触发该事件并且对话框显示多次。

虽然我的示例使用 jQuery Mobile，但我需要它通过原生 JavaScript 工作，因为我既有使用 jQuery Mobile 的移动设备，也有不使用任何 jQuery 的桌面设备。这不是我想要的，但也是我无法控制的。

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

function callDialog() {
    setTimeout(showDialog, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>
<link href="https://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css" rel="stylesheet"/>
<div data-role="page" data-theme="a" id="home">
  <div data-role="header" data-theme="a" align="center">
    <h1>TESTING PAGE</h1>
    <div data-role="navbar" data-iconpos="top">
      <ul>
        <li><a href="#home" data-icon="home">Home</a></li>
        <li><a href="#away" data-icon="grid">Away</a></li>
      </ul>
    </div><!-- /navbar -->  
  </div>
  
  <div data-role="content">
    <p>TESTING PAGE ONE!!</p>
    <ul data-role='listview' data-inset='true'>
      <li><a href="#" onclick="callDialog();">This should do something.</a></li>
    </ul>
  </div>
  <div data-role="footer" data-theme="a">
    <h3>Copyright</h3>
  </div>
</div>

<div data-role="page" data-theme="a" id="away">
  <div data-role="header" data-theme="a" align="center">
    <h1>TESTING PAGE</h1>
    <div data-role="navbar" data-iconpos="top">
      <ul>
        <li><a href="#home" data-icon="home">Home</a></li>
        <li><a href="#away" data-icon="grid">Away</a></li>
      </ul>
    </div><!-- /navbar -->  
  </div>
  
  <div data-role="content">
    <p>TESTING PAGE TWO!!</p>
  </div>
  <div data-role="footer" data-theme="a">
    <h3>Copyright</h3>
  </div>
</div>
<div data-role="dialog" id="dialog">
  <div data-role="header" data-theme="d">
    <h1>Dialog</h1>
  </div>
  <div data-role="content">
    <h1>Close page?</h1>

    <p>This is simply a page made to look like a </p>
    <a
      href="#" data-role="button" data-rel="back" data-theme="b">Sounds good</a>    <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a> 
  </div>
</div>

我已经尝试了 event.preventDefault、删除事件监听器和其他一些操作，但我似乎无法重新附加 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