在JavaScript中结束事件驱动函数

我在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
}

---

有几种解决方案，其中一些依赖于库，但看起来“更好”：

例如，使用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'，handleButtonClick'）上；
函数handleButtonClick（）{
$（this）.off（'click'，handleButtonClick）；//禁用单击事件
//做各种你不想重复的事情
$（this）.on（'click'，handleButtonClick）；//重新连接处理程序
}

或：

点击我
$（'button'）。一次（'click'，handleButtonClick）//附加一次性处理程序
函数handleButtonClick（）{
//做各种你不想重复的事情
$（此）.once（'click'，handleButtonClick）；//附加一次性处理程序
}

---

大多数库都支持类似的方法，如果您更愿意使用JS，当然也可以这样做。“不是我吗”提供了一个很好的例子：

有几种解决方案，其中一些依赖于库，但看起来“更好”：

例如，使用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'，handleButtonClick'）上；
函数handleButtonClick（）{
$（this）.off（'click'，handleButtonClick）；//禁用单击事件
//做各种你不想重复的事情
$（this）.on（'click'，handleButtonClick）；//重新连接处理程序
}

或：

点击我
$（'button'）。一次（'click'，handleButtonClick）//附加一次性处理程序
函数handleButtonClick（）{
//做各种你不想重复的事情
$（此）.once（'click'，handleButtonClick）；//附加一次性处理程序
}

---

大多数库都支持类似的方法，如果您更愿意使用JS，当然也可以这样做。“我不是我”提供了一个很好的例子：

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

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

 // 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;`
        }
    };
})();

---

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

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

 // 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;`
        }
    };
})();

试试看：

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

试试看：

---

编辑：在您提供特定代码之前，我发布了这篇文章，但您已经明白了。

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

---

如果要确保函数只运行一次：

---

您是否碰巧有一些代码作为示例显示？例如，这些函数在做什么？他们是否在使用setInterval、进行ajax调用等…？使用一个标志，表明它已经在运行，以防止其他人启动。请提供一些代码？什么是“结束第一个实例”？我添加了一些代码。您是否碰巧有一些代码作为示例显示？例如，这些函数在做什么？他们是否在使用setInterval、进行ajax调用等…？使用一个标志，表明它已经在运行，以防止其他人启动。请提供一些代码？什么是“结束第一个实例”？我添加了一些代码。很抱歉回复太慢。我最终得到了一些与你描述的大致相同的东西。我将running初始化为false作为一个全局变量，然后使用类似“if（running）{/*whater*/}else{running=true；/*whater*/}”的代码。因此，对函数的后续调用转到“running==true”块。谢谢，彼得。很抱歉回复太慢。我最终得到了一些与你描述的大致相同的东西。我将running初始化为false作为一个全局变量，然后使用类似“if（running）{/*whater*/}else{running=true；/*whater*/}”的代码。因此，对函数的后续调用转到“running==true”块。谢谢你，彼得。

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