javascript - jquery 在点击时更改时间间隔，当点击功能完成时重置为默认值

Question

我有一个自定义内容 slider ，每 5 秒后滑动一次。该 slider 还具有下一个和上一个功能。

问题:

1. 当我点击下一步时，幻灯片不会立即出现。

2. 点击 next/prev 后 slider 开始快速滑动。

我想做什么:

1.当我点击下一个/上一个时，我希望 slider 立即滑动，而不用等待 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 here

Answer 1

好吧，我对你的函数做了一些小的更新，如下所示:

See inline comments

DEMO

$(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
        }
    });
});