0

我正在使用带有 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
}
4

4 回答 4

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>

或者：

<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

于 2013-04-12T16:54:26.757 回答
1

如果你想确保一个函数只运行一次：

基于 benny 示例的示例

function onlyOnce(proc){
    return function () {
        var result = proc.apply(this,arguments);
        proc = function () {};
        return result;
    }
}
于 2013-04-12T17:02:26.590 回答
1 
var buttonView = document.getElementById('buttonView');

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

buttonView.onclick = buttonView.handleEvent;

试试看：http: //jsfiddle.net/KHQ4y/

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

于 2013-04-12T16:56:04.640 回答
1

似乎很明显正在发生一些异步和长时间运行的事情。

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

 // 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;`
        }
    };
})();
于 2013-04-12T16:54:36.530 回答