jquery事件委托变量作用域连续调用(jquery event delegation variable scope with consecutive calls)

编程入门 行业动态 更新时间:2024-10-23 14:32:23
jquery事件委托变量作用域连续调用(jquery event delegation variable scope with consecutive calls)

使用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'需要很长时间才能执行,然后如果再次触发'click','bar'变量会被重新分配一个值还是一个新值产生的?

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

我还没有完成动画,所以我没有一个工作集在网上放置jsFiddle,但是有没有什么经验法则适用于我应该研究的范围或某人可能找到的范围的更清晰的解释?

编辑: 在上面,我已经添加了类似于我使用的情况。 在上面的简化情况下,'bar'的值仍然保持连续两次调用的期望值,但在更复杂的情况下,我正在通过(仍然),除非我特别将参数传递给回调函数,否则仍然存在一个条件允许2个连续的调用改变参数的值,以便回调看到后续调用创建的值 - 而不是在其自己触发的调用中逻辑设置的值。 如果任何人都可以在简化的例子中复制这个效果,我会很感激。 我正在削减我的功能,试图制作一个复制它的jsFiddle。

谢谢,AE

With event delegation in jQuery 1.6, you can respond to events that have bubbled up to a common parent.

A sample implementation is like this:

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

This kind of structure can work really well when you have many event triggers you want to have bound on a page. However, I've noticed a curious behaviour and wondered if someone could enlighten me on the scope of the following:

If you define a variable 'var bar;' before 'a' and use it in 'a' and 'a' takes a long time to execute, then if 'click' is triggered a second time, would the 'bar' variable be reassigned the value or would a new one be created?

The reason for the question is that I've got an 'unfinished' animation in which the animation takes 1.3 seconds to complete. If I trigger two consecutive click events, the target and type are correctly set, but the second animation appears to be affecting the first one and the two scopes appear to be available to each other.

I haven't yet finished the animation, so I haven't got a working set to put online in jsFiddle, but is there any rule of thumb for scope here that I should be researching or some clearer explanation of scope available someone may have found?

EDIT: In the above, I've added in a situation similar to what I'm using. In the simplified case above, the value of 'bar' still holds the expected value on 2 consecutive calls, but in the more complicated case I am working through (still), unless I pass the parameters into the callback function specifically, there is still a condition that's allowing 2 consecutive calls to change the value of the parameter such that the callback sees a value created by a subsequent call - not the value that was logically set in its own triggered call. If anyone can replicate this effect on a simplified example, I'd appreciate it. I'm whittling down my functions to try to produce a jsFiddle that replicates it.

Thanks, AE

最满意答案

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

If you click it a second time then a new bar variable would be created, both bar values would be independent of each other. To see this in action i created a fiddle. Click twice fast and you will notice that the second time bar takes the default value and not the value that the initial bar variable had, which is expected.

更多推荐

本文发布于:2023-07-08 20:05:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1080281.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:变量   作用   事件   event   jquery

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!