具有连续调用的jQuery事件委托变量范围

Question

借助 jQuery 1.6 中的事件委托，您可以响应已冒泡到共同父级的事件。

一个示例实现是这样的：

(function($){
  $.fn.myeventhandler = function () {

     return this.delegate('a.next, a.prev', 'click customEvent', function (event) {

       var target=$(event.target);
       var bar = null;

       if('click' == event.type) {              /*~[ call this 'a' ]~*/

          // handle the click event
          $('#next-element').animate({width:'200px'},1300,function(){
             bar = 'value1';
             $('#next-element').animate({width:'100px'},1300,function(){
                 bar = 'value2';
                 console.log(bar);
             });
          });

       } else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/

          // handle the customEvent event
          $('#my-element').animate({height:'200px'},1300,function(){
             bar = 'my-event1';
             console.log(bar);
          });

       }

       return false;
     });
  }
})(jQuery);

当您想在页面上绑定许多事件触发器时，这种结构可以很好地工作。但是，我注意到了一个奇怪的行为，想知道是否有人可以在以下范围内启发我：

如果你在'a'之前定义了一个变量'var bar;'并在'a'中使用它并且'a'需要很长时间才能执行，那么如果'click'被第二次触发，'bar ' 变量被重新赋值还是会创建一个新的？

问题的原因是我有一个“未完成”的动画，其中动画需要 1.3 秒才能完成。如果我触发了两个连续的点击事件，则目标和类型设置正确，但第二个动画似乎影响了第一个动画，并且两个范围似乎对彼此可用。

我还没有完成动画，所以我还没有一个工作集可以在 jsFiddle 中上线，但是这里有没有我应该研究的范围的经验法则或者对范围的更清晰的解释？可能找到了？

编辑： 在上面，我添加了类似于我正在使用的情况。在上面的简化情况下，'bar' 的值在 2 次连续调用中仍然保持预期值，但在更复杂的情况下，我正在处理（仍然），除非我专门将参数传递给回调函数，否则仍然存在允许 2 次连续调用更改参数值的条件，以便回调看到由后续调用创建的值 - 而不是在其自己的触发调用中逻辑设置的值。如果有人可以在简化的示例中复制这种效果，我将不胜感激。我正在缩减我的函数以尝试生成一个复制它的 jsFiddle。

谢谢， 自动曝光

Answer 1

如果您再次单击它，则会创建一个新的条形变量，两个条形值将彼此独立。为了看到这一点，我创建了一个fiddle。快速单击两次，您会注意到第二个时间柱采用默认值，而不是初始柱变量所具有的值，这是预期的。

Answer 2

事件对象被传递而不是新创建的各种事件，因此，“a”不会被重新分配，但会受到两个事件操作的影响。