jquery更改单击时间间隔，单击函数完成时，将其重置为默认值。

Question

我有一个自定义的内容滑块，每过5次滑动就会发生一次，seconds.The滑块也有Next和Prev功能。

问题：

1. 当我单击“下一步”时，幻灯片不会立即发生。
2. 单击next/prev后，滑块开始快速滑动。

我想做的事：

1.当我单击next/prev时，我希望滑块立即滑动，而不等待5秒间隔。当幻灯片完成时，将时间间隔重置为默认值，即5秒。

<div id="content-slide">
    <div id="content-slide-container">
        <div class="content content-1"><h2>1</h2></div>
        <div class="content content-2"><h2>2</h2></div>
        <div class="content content-3"><h2>3</h2></div>
        <div class="content content-4"><h2>4</h2></div>
        <div class="content content-5"><h2>5</h2></div>
        <div class="content content-6"><h2>6</h2></div>
        <div class="content content-7"><h2>7</h2></div>
        <div class="content content-8"><h2>8</h2></div>
        <div class="content content-9"><h2>9</h2></div>
        <div class="content content-10"><h2>10</h2></div>
        <div class="content content-11"><h2>11</h2></div>
        <div class="content content-12"><h2>12</h2></div>
        <div class="content content-13"><h2>13</h2></div>
        <div class="content content-14"><h2>14</h2></div>
        <div class="content content-15"><h2>15</h2></div>
        <div class="content content-16"><h2>16</h2></div>
    </div>
</div>
<div id="navigation">
    <span id="prev-slide">Prev</span>
    <span id="next-slide">Next</span>
</div>

css

#content-slide {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
#content-slide-container{
    width: 3200px;
    height: 100px;
}
.content {
    width: 200px;
    height: 100px;
    background-color: #FF1493;
    float: left;
}
.content h2{
    font-size: 25px;
    text-align: center;
}
#navigation{
    width: 800px;
    height: 20px;
    margin: 0 auto;
}
#prev-slide{
    width: 100px;
    height: 20px;
    float: left;
    background-color: #000000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
#next-slide{
    width: 100px;
    height: 20px;
    float: right;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
}

js

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                foo.box.animate({'marginLeft':'+='+(foo.content_width)});
                foo.counter--;
                if(foo.counter<= 1){
                    foo.bar = false;
                }
            // Prev
            }else{
                foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
                }
            }

        },foo.pause);
    }   
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            startSlider();
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            startSlider();
        }
    });
});

JSFIDDLE 这里

Answer 1

我对您的function做了一些小小的更新，如下所示：

参见内联注释

演示

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                slideLeft()//keep sliding left in a separate function
            // Prev
            }else{
                slideRight()////keep sliding right in a separate function
            }

        },foo.pause);
    }   

    //2 new functions for slideLeft and slideRight
    function slideLeft(){
        foo.box.animate({'marginLeft':'+='+(foo.content_width)});
        foo.counter--;
        if(foo.counter<= 1){
            foo.bar = false;
        }   
    }
    function slideRight(){
        foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
        }
    }
    //end
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            pauseSlider(); //on click clear interval
            slideLeft() //call slideLeft
            startSlider() //start the slide again with interval
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            pauseSlider() //on click clear interval
            slideRight() //slide Right
            startSlider() //start it again
        }
    });
});

Answer 2

您应该将代码移动到setPrev和setNext函数。它们应该与startSlider函数处于相同的水平上。还应该清除$('#prev-slide').click(function(){和$('#next-slide').click(function(){之后的间隔。