Question

我在HTML5中使用JavaScript。当用户单击按钮时，将启动事件驱动的JavaScript函数。当用户再次单击该按钮时，此功能的另一个实例将启动。所以我有两个处理事件的相同函数的实例。但是我只希望新实例运行。如何结束第一个实例？

示例是具有以下代码的函数

Canvas.paper = Raphael(xOffset,yOffset,imageWidth,imageHeight);
masterBackground = Canvas.paper.rect(0,0,imageWidth,imageHeight);

window.onkeydown=function(e){
    // Event handler code
}

document.addEventListener('keydown', function(event) {
    // Event handler code
}

masterBackground.mousemove(function(e){
    // Event handler code
}

Answer 1

这有几种解决方案，其中一些是依赖于库的，但是“更好”可以看：

例如，使用jQuery：

<button>Click me</button>

<script>
  $('button').on('click', handleButtonClick);

  function handleButtonClick() {
    $(this).off('click', handleButtonClick); //disable click event
    //do various things you don't want duplicated
    $(this).on('click', handleButtonClick); //reattach handler
  }
</script>

OR：

<button>Click me</button>

<script>
  $('button').once('click', handleButtonClick); //attach one-time handler

  function handleButtonClick() {
    //do various things you don't want duplicated
    $(this).once('click', handleButtonClick); //attach one-time handler
  }
</script>

大多数图书馆都支持类似的方法，如果你更愿意使用vanilla JS，那当然也是可能的。 “我不是我”为此提供了一个很好的例子：https://stackoverflow.com/a/15976888/622129

Answer 2

很明显，异步和长时间运行正在发生。

要防止并发实例运行，只需使用一个启动时设置的标志，以便其他人无法启动。然后当前一个完成时，重置标志，以便另一个可以启动。

 // Immediately invoked function, makes a variable and returns the handler
 //    that uses the variable as a flag.
button.onclick = (function() {

    // local variable, only accessible to the returned handler
    var running = false;

    // This is your event handler.
    return function(e) {
        if (running === false) {
            running = true;

            // run your asynchronous operation

            // after it's complete,  set `running = false;`
        }
    };
})();

Answer 3

var buttonView = document.getElementById('buttonView');

buttonView.handleEvent = function(event) {
    window.alert(this.id);
    //this.onclick = null;
};

buttonView.onclick = buttonView.handleEvent;

尝试一下： http://jsfiddle.net/KHQ4y/

编辑：我在您提供特定代码之前发布了这个，但您明白了。

Answer 4

如果你想确保一个功能只运行一次：

example based on benny's example

function onlyOnce(proc){
    return function () {
        var result = proc.apply(this,arguments);
        proc = function () {};
        return result;
    }
}

在JavaScript中结束事件驱动函数

4 个答案: