JavaScript jquery回调累积

javascript jquery callback accumulates

本文关键字：回调 jquery JavaScript      更新时间：2023-09-26

问题：每次点击div.a 时，点击div.b 时的回调次数累积 1。

var $=jQuery;
$(function(){
   $("div.a").click(function(){cbf(trgmsg);});
});
function trgmsg(){
   alert($.now());
}
function cbf(cb){
   $("div.b").click(function(){cb()});
}

结果：
单击div.a 一次并单击div.b => 警报（） 弹出;
如果我再次单击div.a 并单击div.b => alert（） 会连续两次弹出;
如果我再次单击div.a 并单击div.b => alert（） 会连续弹出三次;
..
等等

我不知道问题的原因是什么，或者它是否只是我对 JS 中回调函数的误解/误用。任何见解和/或建议将不胜感激。谢谢

无需重构即可修复代码的最快方法是取消绑定并重新绑定。

var $=jQuery;
$(function(){
   $("div.a").click(function(){cbf(trgmsg);});
});
function trgmsg(){
   alert($.now());
}
function cbf(cb){
   $("div.b").off('click').click(function(){cb()});
}

你现在拥有的（重构）看起来像：

(function($){
  $(function(){
    function trgmsg(){
      alert($.now());
    }
    $('div.a').click(function(){
      // every time `div.a` is clicked a new click event is
      // attached to `div.b`.
      $('div.b').click(function(){ // maybe use `.one()` instead of `.click()`?
        cb();
      });
    });
  });
})(jQuery);

您可能希望使用.one()以便在绑定后仅执行一次。或者，您需要详细说明实际目标是什么，看看是否可以以不同的方式解决。

如果您只想针对 div.b 调用提供的函数，则单击div.a时，这可能对您有用

var $=jQuery;
$(function(){
   $("div.a").click(function(){cbf(trgmsg);});
});
function trgmsg(){
   alert($.now());
}
function cbf(cb){
   $("div.b")[0].apply(cb);
}

您正在将多个点击事件附加到div.b 上。 因此，每次您单击div.a 时，它都会将另一个点击事件附加到div.b 上，因此当单击div.b 时，会触发它的每个点击事件。 您可以尝试设置一个标志，表明点击已被注册。

var $=jQuery;
var flag = 0;
$(function(){
   $("div.a").click(function(){cbf(trgmsg);});
});
function trgmsg(){
   alert($.now());
}
function cbf(cb){
   if (!flag) {
       flag = 1;
       $("div.b").click(function(){cb()});
   }
}

虽然我不太确定你使用它做什么，所以这可能不是你想要的功能。

相关文章：