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

Question

i have made a rotating slider in javascript and css. Javascript function makes it rotating. When i first time load the page it works fine but when i navigate to some other page and then return back, the js function is called but the slider does not stop rotating on mouse hover. I have made a js function that when mouse hovers on div the rotation stop, when it leaves the function is called again.Here is my js code

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

As @David said browser was caching the javascript, so your code for hover effect is not work as you put it in such a way, that when js file will call then hover event is fire but here js file is already cached.

You may try this, instead of using hover function anonymously put it inside window.onload .