jquery - 在我在同一个函数[JQuery]中清除它之后，重新启动一个间隔到一个.click（函数（））

Question

我在 JQuery 中做一些滑块。

因此，我从调用转换的间隔开始，并在有人单击“下一步”按钮时将其清除。因为如果他在间隔结束之前点击它，他将没有时间阅读我的滑块......但我希望这个间隔在点击后重新初始化以继续我的幻灯片，如果他没有做任何其他事情。

我试图把它放在我的 .click 函数中的 translate 函数之后，但这会做一些奇怪的事情......点击后我的时间不对。这就像两个间隔同时运行或类似的东西。

任何人都可以对我说在点击转换后“重新启动”它的最优雅的方法？

这是现在的代码：（没有第二次启动间隔）

var jq=jQuery.noConflict();  



jq(document).ready(function() {
    jq('.highlight_container').css('x','0');
});



// Animation Loop

jq(document).ready(function() {
    var checkClick = setInterval(function(){
        if (jq('.highlight_container').css('x') === '-2100px'){
            jq('.highlight_container').transition({
            x: '0px',
            duration: '750',
            easing: 'in-out',
            });
        }
        else {
            jq('.highlight_container').transition({
            x: '-=700px',
            duration: '500',
            easing: 'out',          
            });
        }
    }, 5000);

// Next Button  

    jq('.highlight_next').click(function() {
        clearInterval(checkClick);
        if (jq('.highlight_container').css('x') === '-2100px') {
            jq('.highlight_container').transition({
                x: '+=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
    });

// Prev Button      

    jq('.highlight_prev').click(function() {
        clearInterval(checkClick);      
        if (jq('.highlight_container').css('x') === '0px') {
            jq('.highlight_container').transition({
                x: '-=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '+=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
    });
});

提前感谢任何遮阳篷：]

编辑：

只需在我的 clik 函数末尾添加 setinterval() 函数似乎就可以了。但这很丑陋。

var jq=jQuery.noConflict();  



jq(document).ready(function() {
    jq('.highlight_container').css('x','0');
});



// Animation Loop

jq(document).ready(function() {
    var checkClick = setInterval(function(){
        if (jq('.highlight_container').css('x') === '-2100px'){
            jq('.highlight_container').transition({
            x: '0px',
            duration: '750',
            easing: 'in-out',
            });
        }
        else {
            jq('.highlight_container').transition({
            x: '-=700px',
            duration: '500',
            easing: 'out',          
            });
        }
    }, 5000);

// Next Button  

    jq('.highlight_next').click(function() {
        clearInterval(checkClick);
        if (jq('.highlight_container').css('x') === '-2100px') {
            jq('.highlight_container').transition({
                x: '+=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
        checkClick = setInterval(function(){
            if (jq('.highlight_container').css('x') === '-2100px'){
                jq('.highlight_container').transition({
                x: '0px',
                duration: '750',
                easing: 'in-out',
                });
            }
            else {
                jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',          
                });
            }
        }, 5000);
    });

// Prev Button      

    jq('.highlight_prev').click(function() {
        clearInterval(checkClick);      
        if (jq('.highlight_container').css('x') === '0px') {
            jq('.highlight_container').transition({
                x: '-=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '+=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
        checkClick = setInterval(function(){
            if (jq('.highlight_container').css('x') === '-2100px'){
                jq('.highlight_container').transition({
                x: '0px',
                duration: '750',
                easing: 'in-out',
                });
            }
            else {
                jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',          
                });
            }
        }, 5000);
    });
}); 

有没有办法在没有 20 行代码的情况下再次调用相同的函数？