OnMouseOver启动循环，OnMouseOut kill循环

Question

我创建了这个小功能，当你将鼠标移过鼠标时，它会循环显示图像：

            function THUMB_ROLL(NEXT)
            {
                LENGTH = ALL_IMAGES.length;

                if(!LENGTH) { return false; }
                if(!NEXT || NEXT === LENGTH) { NEXT = 0 }

                $('#IMAGE_THUMB').css('background-image','url(/<?php echo $ITEM_CODE;?>/'+ALL_IMAGES[NEXT]+')');

                setTimeout(function() 
                {
                    THUMB_ROLL(NEXT+2)
                },800);
            }

        </script>

我有，onmouseover =＆＃34; THUMB_ROLL（）;＆＃34;

但是，我似乎无法找到一个解决方案来停止循环onmouseout。任何帮助表示赞赏！

修改

<script>

            var timer;

            function THUMB_ROLL(NEXT)
            {
                LENGTH = ALL_IMAGES.length;

                if(!LENGTH) { return false; }
                if(!NEXT || NEXT === LENGTH) { NEXT = 0 }

                $('#IMAGE_THUMB').css('background-image','url(/<?php echo $ITEM_CODE;?>/'+ALL_IMAGES[NEXT]+')');

                timer = setTimeout(function() 
                {
                    THUMB_ROLL(NEXT+1)
                },800);
            }

            $(document).on('mouseover','#IMAGE_THUMB',function()
            {
                THUMB_ROLL();
            });

            $(document).on('mouseout','#IMAGE_THUMB',function()
            {
                clearTimeout(timer);
            });

        </script>

Answer 1

将超时分配给存储timerID的变量。

然后让moueout清除超时，这应该会停止流程。

var timer;

// mouseover event..


timer = setTimeout(function() {
            THUMB_ROLL(NEXT+2)
        },800);

// mouseout event

clearTimeout(timer);

最好将您的问题分开并将事件附加到脚本标记内，而不是将它们内联在一起。