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);

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

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

这个问题的原因是我有一个'未完成'的动画,动画需要1.3秒才能完成.如果我触发两个连续的单击事件,则正确设置目标和类型,但第二个动画似乎影响第一个动画,并且两个示波器似乎彼此可用.

我还没有完成动画,所以我没有一个工作集在jsFiddle上线,但这里是否有任何经验法则我应该研究或对某些人可能找到的范围有一些更明确的解释？

编辑: 在上面,我添加了类似于我正在使用的情况.在上面简化的情况下,'bar'的值仍然保持2个连续调用的预期值,但在更复杂的情况下我正在处理(仍然),除非我特别将参数传递给回调函数,仍然有不这是逻辑上在自己的触发呼叫建立的价值-这是允许连续2调用改变参数使得回调看的后续调用创建的值的值的条件.如果有人可以在简化的例子中复制这种效果,我会很感激.我正在削减我的功能,试图生成一个复制它的jsFiddle.

谢谢,AE

Answer 1

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