Question

我有一个滑块，我试图暂停，然后在用户将鼠标悬停在其上时恢复：

    var run_state = true;
    var body_left = 0;
    function slider() {
        if (run_state == true) {
            $.get('http://mydomain.com/ajaxpage', function(data){
                var data_one = $(data).find('#container_sub').html();
                $('#container').append(data_one);
                body_left = body_left - 201;
                $('#container').animate({marginLeft: body_left+'px'}, 400);
                setTimeout(slider, 3000);
            });         
        }       
    }

    $('body').on('mouseover', '#container', function(){
        run_state = false;
    });
    $('body').on('mouseleave', '#container', function(){
        run_state = true;
        slider();
    });

我设法用mouseover暂停滑块但是当mouseleave时，slider()函数会不停地运行几次，导致多个动画一个接一个地运行。< / p>

我的问题是，在mouseleave如何强制滑块完成当前动画，在再次运行之前暂停3秒？

由于

Answer 1

您可以使用setInterval;

var body_left = 0;
var myTimer;
function getContent() {
    $.get('http://mydomain.com/ajaxpage', function(data){
        var data_one = $(data).find('#container_sub').html();
        $('#container').append(data_one);
        body_left = body_left - 201;
        $('#container').animate({marginLeft: body_left+'px'}, 400);
        setTimeout(slider, 3000);
    }); 
}

function run() {
    myTimer = setInterval(function() {
        getContent();
    }, 3000);
}

$('#test').on('mouseover', function(){
    clearInterval(myTimer);

});
$('#test').on('mouseleave', function(){
    run();
});

您可以在此处查看演示： jsfiddle

jQuery停止函数运行了几次

1 个答案: