resetting a set interval for slideshow_问答_开发者

开发者 https://www.devze.com 2023-03-10 05:42 出处：网络

I\'m just beginning in Jquery and learning pretty quickly, but I spent the past few hours trying to figure out how to reset an interval, if someone could please explain this concept to me it would hel

I'm just beginning in Jquery and learning pretty quickly, but I spent the past few hours trying to figure out how to reset an interval, if someone could please explain this concept to me it would help me out a lot. I have an interval firing a click that changes the image every 6s. I would like to be able to reset that interval again at 6s every time that click is fired, so that when a user clicks to advance the slideshow the next image will wait 6 seconds before appearing. thanks!

<html><head><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf开发者_运维问答-8"></script>
<style type="text/css">
    /*Home Header Slideshow*/
    #headercontainer {width:700px; height:300px; margin-left:-10px; position:relative; overflow:hidden;}
    #nextslide {position:absolute; top:257; left:553; z-index:100; width:47px; height:43px; background:url(images/slidearrow.png)}
    #nextslide:hover {background-position: 0 43px;}
    #gallery{width: 600px; height:300px; position:absolute; left:0px;}
        #gallery a{width:600px; height:300px; position:absolute;}
        .shownslide{display:block; z-index:100;}
        #i1{background:url("images/slideimage1.jpg");}
        #i2{background:url("images/slideimage2.jpg");}
        #i3{background:url("images/slideimage3.jpg");}
        #i4{background:url("images/slideimage4.jpg");}          
    #thumbs{width:100px; height:300px; position:absolute; right:0px;}
        #thumbs a{display:block; width:100px; height:100px; position:relative;}
        #t1{background:url("images/slidethumb1.jpg");}
        #t2{background:url("images/slidethumb2.jpg");}
        #t3{background:url("images/slidethumb3.jpg");}
        #t4{background:url("images/slidethumb4.jpg");}
</style>
</head>
<center>
<div id="headercontainer">
            <a id="nextSlide" href="#"></a>
<div id="gallery">
            <a id="i4" href="#"></a>
            <a id="i3" href="#"></a>
            <a id="i2" href="#"></a>
            <a id="i1" href="#"></a>
</div>
<div id="thumbs">
    <a id="t2" href="#"></a>
            <a id="t3" href="#"></a>
    <a id="t4" href="#"></a>
            <a id="t1" href="#"></a>
 </div>
 </div>
 <script>
var slideDelay = 6000;

$(function(){
    $('#nextSlide').bind('click',nextSlide);
    $('#nextSlide').trigger('click');
    setInterval(nextSlide,slideDelay);
});

function nextSlide(){
    $('#gallery a:last').stop(true, true);
    $('#thumbs a:first').stop(true, true);
    $('#gallery a:last').fadeOut(function() {$(this).remove();});
    $('#gallery a:last').clone().prependTo('#gallery');
    $('#thumbs a:first').slideUp(function() {$(this).remove();});
    $('#thumbs a:first').clone().appendTo('#thumbs');
};

 </script>
 </center>

     </body>
 </html>

You can clear an interval if you assign it to a variable using

window.clearInterval(intervalID)

and to assign an interval you would use,

var intervalID = setInterval(func, 6000);

In your case you could either overwrite the interval when they click, which in effect will reset the interval, or you can use clearInterval and then reset it.

Reference

EDIT

In your case, from your comment I would just use setTimeout instead setInterval. Its only fired once, but if you put it in nextslide, it will get cleared if its already set, and then reset every time regardless of how the nextSlide() function is called.

var timeout = '';

function nextSlide(){
    $('#gallery a:last').stop(true, true);
    $('#thumbs a:first').stop(true, true);
    $('#gallery a:last').fadeOut(function() {$(this).remove();});
    $('#gallery a:last').clone().prependTo('#gallery');
    $('#thumbs a:first').slideUp(function() {$(this).remove();});
    $('#thumbs a:first').clone().appendTo('#thumbs');

    clearTimeout(timeout);
    timeout = setTimeout(function(){nextSlide()}, slideDelay);
};