jQuery回调函数累积

Question

我为自定义确认框编写了一些代码，该确认框在按下确认按钮（是按钮）时调用一个函数并将另一个函数作为参数传递，我将它绑定到 2 个不同的按钮点击，使用不同的函数作为参数.例如：

$('#button1').click(function() {
    callFunction(function() { alert("test"); });
});
$('#button2').click(function() {
    callFunction(function() { alert("test2"); });
});

function callFunction(callback) {
    //code to display custom confirm box

    console.log(callback);

    $('.confirm-box .yes-button').click(function() {
        callback();
    });
}

一切都按预期进行，确认框出现，点击确认按钮时我执行了一个回调函数，它会提醒 "test"（或 "test2"，具体取决于调用确认框的按钮）。当我单击发送警报 "test" 的函数的按钮 1 时，问题出现了功能。现在，一旦我按下是按钮而不是仅提醒 "test2"，我就会同时收到 "test2" 和 "test" 提醒，即使 console.log 我只记录了提醒 "test2" 的函数=17=] 在按钮 2 单击时。这些回调函数似乎堆积在某个地方，但我不明白在哪里以及为什么。

Answer 1

您可以通过类、

设置身份来实现

var button = $('.confirm-box .yes-button');

$('#button1').click(function() {
  button.removeClass("b").addClass("a");
});

$('#button2').click(function() {
  button.removeClass("a").addClass("b");
});

button.click(function() {
  if($(this).hasClass("a")){
     callBackForButton1();
  } else {
     callBackForButton2();
  }
});

堆叠单个元素的事件处理程序是一种不好的做法。

Answer 2

.click() 函数可以向一个元素添加多个处理程序，我认为这就是这里发生的情况。试试这个：

// ...
$('.confirm-box .yes-button').unbind('click').click(function() {
    callback();
});

这会在应用新的点击处理程序之前删除所有以前的点击处理程序。

Answer 3

当你执行代码时：

$('.confirm-box .yes-button').click(function() {
    callback();
});

您正在将事件处理程序绑定到 .yes-button 元素。如果您运行该代码两次，它将绑定两个事件。等等。

一个解决方案是改用 .one，这样事件处理程序将在第一次触发后被删除：

$('.confirm-box .yes-button').one("click", function() {
    callback();
});

如果有两个确认框同时打开或者如果有两个 .yes-button 元素，这当然会有问题，但对于一个简单的用例，它工作正常。

Answer 4

发生的情况是每次单击按钮时都会执行 callFunction 方法。它运行该代码块并将事件侦听器应用于 $('.confirm-box .yes-button') 按钮。所以点击你的按钮 N 次也会应用点击监听器 N 次。一种解决方案是将函数存储在变量中。

不确定最终目标是什么，但这是一个解决方案。另一种解决方案是每次都删除按钮事件侦听器。

var functionToCallOnYes = function() {};

$('#button1').click(function() {
  functionToCallOnYes = function() {
    alert("test");
  };

});

$('#button2').click(function() {
  functionToCallOnYes = function() {
    alert("test2");
  };
});


$('.confirm-box .yes-button').click(function() {
  console.log(functionToCallOnYes);
  functionToCallOnYes();
});

Answer 5

是的，额外的回调越来越多。在$('button1').click(f)中，每次点击button1时都会调用无参数函数f。在这种情况下，f 是 callFunction-- 每次调用时，它本身都会将新处理程序附加到任何 .confirm-box .yes-button 元素的函数。所以在第 N 次点击时，您应该有 N-1 个警报。

为了简化此类操作，您可以在 JavaScript 中按名称引用函数。所以如果你有 function test() { console.log("test"); };，你可以只写一次 $(".confirm-box").click(test)，然后每次点击 .confirm-box 都会在控制台上打印 test。

通常，如果您的回调的唯一目的是调用回调，您只需删除该回调即可。

jQuery回调函数累积

jQuery callback function accumulating

javascript

jquery

function

callback

jquery-callback