javascript - javascript jquery回调累积

Question

问题：每次点击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 => alert() 弹出；
如果我再次单击 div.a 并单击 div.b => alert() 连续两次弹出；
如果我再次单击 div.a 并单击 div.b => alert() 连续弹出三次；
..等等

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

Answer 1

没有重构的最快修复代码就是取消绑定和重新绑定。

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

Answer 2

您现在拥有的（重构）如下所示：

(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()在它绑定后使用它，它只执行一次。否则，您需要详细说明实际目标是什么，看看是否可以以不同的方式解决。

Answer 3

如果您只想在单击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);
}

Answer 4

您将多个点击事件附加到 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()});
   }
}

虽然我不太确定您使用它的目的是什么，但它可能不是您想要的功能。