Question

下面是我的代码

<div class="play" onclick="updateData()" title="xyz" id="pqr"></div>

问题是，当我多次点击更新数据时，事件会排队，导致行为异常。

如何在一段时间间隔内禁用鼠标点击此div？

我的目的是防止用户不经意地多次点击

Answer 1

您可以使用Lodash的_.debounce()：

等实用程序

var buttonListener = function() {
  // This function will be called only if 500ms are passed since the last click
  updateData();
}
var intervalButton = _.debounce(buttonListener, 500);
$('#pqr').on('click', intervalButton);

工作示例：http://jsfiddle.net/LaQnb/6/

Answer 2

更新触发元素函数调用以包含this：

<div class="play" onclick="updateData(this)" title="xyz" id="pqr"></div>

更新您的功能：

function updateData(triggerElement) {

    // disable further clicks until we re-bind the event...
    triggerElement.onclick = null;

    // rebind the event after 500ms
    setTimeout(function() {
        triggerElement.onclick = updateData;
    }, 500);


    // ... rest of your function's code ...

}

Answer 3

试试这个

<div class="play" onclick="updateData(); this.onclick='javascript:void(0);'" title="xyz" id="pqr"></div>

它取代你的onclick事件。

Onclick事件时间差距

3 个答案: