jquery - 在 jQuery 中重叠多个 setTimeouts

Question

这里是新的，也是 jQuery 的新内容。我一直在寻找我的问题的答案但没有成功，所以我来了。我在使用这段代码时遇到问题:

<p>Hello.</p>
<p>Good bye.</p>
<p>Ciao!</p>
<script>
jQuery('p').mouseover(
    function() {
        jQuery(this).css({backgroundColor:'red'});
    }
);
jQuery('p').mouseout(
    function() {
        myElement = jQuery(this);
        setTimeout(function(){
            color = ['red','green','blue','orange'];
            myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});
        }, 1000
        )
    }
);
</script>

问题是，如果我们在执行最后一个 setTimeout 函数之前将光标移动到新段落上，那么第一个和第二个 setTimeout 函数都会对最后一个受影响的段落起作用。例如:

a) 将光标移至/移出段落。在执行与mouseout事件关联的setTimeout函数之前，

b) 将光标移至/移出不同的段落。现在是setTimeout函数

myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});

将为第二段连续选择两次背景颜色，而为第一段不选择背景颜色。我尝试将两个不同的变量(myElementOne 和 myElementTwo)与 jQuery(this) 值关联起来，但无济于事。我将非常感谢一些帮助。谢谢。

Answer 1

问题是你的myElement变量在 global scope 中定义，以及每个mouseout执行会覆盖它之前的值。

如果您定义了myElement与 var myElement = jQuery(this); , myElement将仅在当前 mouseout 的范围内定义事件 - 并且只会影响超时回调中的该元素。