Question

我创建了一个setInterval，每当我按下“返回”（在car_choose页面上）并按下时，在每次出现问题时在3秒内在不同图片之间切换，setInterval就像疯了一样，尽管我使用了clearInterval。 / p>

如果有人可以帮助我，我很高兴，谢谢你的到来。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/css_style.css"/>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head>

    <script>
        i=1;
        function picTimer()
        {   
            var j=1;
            while(j<=5)
            {
                ($("#car"+j)).css('display','none');
                ($("#img"+j)).css('display','none');
                j++;
            }
                if(i>5)
                {
                    i=1;
                    ($("#car"+i)).css('display','block');
                    ($("#img"+i)).css('display','block');
                }
                else 
                {                       
                    ($("#car"+i)).css('display','block');
                    ($("#img"+i)).css('display','block');
                }
                i++;
            }


        $(document).on("pageshow","#homepage",function()
        {
            $("#trythisone").click(function() //case LocalStorage is null.
            {           
            if(localStorage.getItem("user") == null)
                return false;
            else //Display pictures.
            {           
                ($("#img1")).css('display','block'); //First picture
                ($("#car1")).css('display','block'); //First car text

                myInterval  = setInterval(function(){picTimer()},3000);             
            }
            });         
        }); 


        //Stop interval
        $(document).on("pagehide","#car_choose",function()
        {

            clearInterval(myInterval);
            setTimeout(picTimer,1);
            var removeit=1;
            while(removeit<=5)
            {
                ($("#car"+removeit)).css('display','none');
                ($("#img"+removeit)).css('display','none');
                removeit++;
            }           
        });
    </script>


    <body>
    <div id="homepage" data-role="page">
        <div data-role="content">
                <div id="main-content">         
                    <ul data-role="listview" data-inset="true">
                    <li id="trythisone"><a href="#car_choose" data-transition="flip">Invite a car</a></li>
                    </ul>
                </div>
        </div>
    </div>

    <div id="car_choose" data-role="page"  data-add-back-btn="true" data-back-btn-text="Back">
        <div id="carhead" data-role="header" data-theme="b">
            <h1>Car Choose</h1>
        </div>
        <div class="anyClass">
                <ul>
                    <li id="img1" class="jpg_move"><img src="car_pics\car1.jpg" width="400" height="400"></li>
                    <li id="img2" class="jpg_move"><img src="car_pics\car2.jpg" width="400" height="400"></li>
                    <li id="img3" class="jpg_move"><img src="car_pics\car3.jpg" width="400" height="400"></li>
                    <li id="img4" class="jpg_move"><img src="car_pics\car4.jpg" width="400" height="400"></li>
                    <li id="img5" class="jpg_move"><img src="car_pics\car5.jpg" width="400" height="400"></li>
                    <p id="car1" class="carText">Super Nano,Model : 2013, Automatic Transmission</p>
                    <p id="car2" class="carText">Fashion Car 2,Model : 1980, Manual Transmission</p>
                    <p id="car3" class="carText">Fashion Car 3,Model : 1968, Manual Transmission</p>
                    <p id="car4" class="carText">Fashion Car 4,Model : 1976, Manual Transmission</p>
                    <p id="car5" class="carText">Fashion Car 5,Model : 1987, Manual Transmission</p>
                </ul>
        </div>
    </div>
    </body>
</html>

断点的图片 http://i61.tinypic.com/2076xx1.jpg

代码：

http://justpaste.it/ecjt

Answer 1

在您的Pagehide中，您将在清除后立即设置超时。你的代码也比它需要的更复杂。

这是一个有效的 DEMO

注意：我注释掉了localStorage位，因为它与此问题无关。

myInterval被声明为页面的全局（在任何函数之外）。在picTimer中，您可以使用一行jQuery（$(".jpg_move, .carText").hide();）

隐藏所有内容

var i=1;
var myInterval;

function picTimer()
{ 
    $(".jpg_move, .carText").hide();
    if(i>5) { i=1; }
    $("#car"+i).show();
    $("#img"+i).show();
    i++;
}

$(document).on("pageshow","#homepage",function() {    
    $("#trythisone").on("click", function() {            
            //if(localStorage.getItem("user") == null)
            //    return false;
            //else //Display pictures.
            //{            
                $(".jpg_move, .carText").hide(); //hide all cars
                $("#img1").show(); //First picture
                $("#car1").show(); //First car text
                myInterval  = setInterval(function(){picTimer()},3000);                
            //}
    });            
});    

//Stop interval
$(document).on("pagehide","#car_choose",function(){   
    clearInterval(myInterval);
    $(".jpg_move, .carText").hide(); //hide all cars
});

Answer 2

你应该声明myInterval。就在i = 1之上;如下：

var myInterval;

每次JQuery Mobile时setInterval都会变得更快

2 个答案: