Question

我在javascript和css中制作了一个旋转滑块。 Javascript函数使它旋转。当我第一次加载页面时它工作正常但当我导航到其他页面然后返回时，调用js函数但滑块不会在鼠标悬停时停止旋转。我做了一个js函数，当鼠标悬停在div上时，旋转停止，当它离开函数时再次调用。这是我的js代码

var timer;
        window.onload = function()
        {
            myTimer();
        };

var $i=1;
 function myTimer(){
                timer=setInterval(function(){
                    if($i<6){
                        closeTab();
                        openTab($i);
                        $i++;
                    }
                    else
                    {$i=1;}
                },2000);
            }
 closeTab();

            var selectedSlider ;
            function closeTab()
            {
                var $this = $('#accordion > li');
                //$width=$(window).width();
                //$this.stop().animate({'width':'110px'},500);
                $this.stop().animate({'width':'7%'},500);
                $('.heading',$this).stop(true,true).fadeIn();
                $('.description',$this).stop(true,true).fadeOut(500);
                $('.bgDescription',$this).stop(true,true).slideUp(700);
            }
            function openTab(id)
            { 
                var $this = $('.bg'+id);                                        
                //$this.stop().animate({'width':'450px'},500);
                $this.stop().animate({'width':'70%'},500);
                $('.heading',$this).stop(true,true).fadeOut();
                $('.bgDescription',$this).stop(true,true).slideDown(500);
                $('.description',$this).stop(true,true).fadeIn();
            }

openTab(1);
            $(function() {
                $('#accordion > li').hover(
                function () {
                    console.log("in mouse hover");
                    var $this = $(this);
                    selectedSlider = $this.attr("class").replace("bg", "");
                    closeTab();
                    openTab(selectedSlider);
                    clearInterval(timer);
                },

                function () {

                }
            );
            }); 
$('#accordion > li').mouseleave(function(){
                console.log("in mouse leave");
                myTimer();
            });

Answer 1

正如@David所说，浏览器正在缓存javascript，所以你的悬停效果代码不能正常工作，因为当js文件调用时，hover事件就会激活，但这里的js文件已经被缓存了。

您可以尝试这样做，而不是使用悬停功能匿名将其放在window.onload内。

为什么javascript函数在返回后停止工作？

1 个答案: