如何在鼠标退出时重启setInterval

Question

我有一个函数，在文档加载5秒后运行，在鼠标悬停时，我想停止setInterval，然后在鼠标悬停时重置它。我已经阅读了大量的教程，但不能让它工作。

我的代码如下:

jQuery(function () {
    var timerId = setInterval(function () {
        var name = "name";
        jQuery.ajax({
            url: "/ajax-includes/index.php",
            type: 'POST',
            dataType: 'html',
            data: {name: name},
            beforeSend: function () {
                jQuery('#progress').html('processing...');
            },
            success: function (data, textStatus, xhr) {
                jQuery('#bodyMain').html(data)
            },
            error: function (jqXHR, exception) {
                if (jqXHR.status === 0) {
                    alert('Not connect.n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found. [404]');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error [500].');
                } else if (exception === 'parsererror') {
                    alert('Requested JSON parse failed.');
                } else if (exception === 'timeout') {
                    alert('Time out error.');
                } else if (exception === 'abort') {
                    alert('Ajax request aborted.');
                } else {
                    alert('Uncaught Error.n' + jqXHR.responseText);
                }
            }
        });
    }, 5000);
    jQuery(document).on('mouseover', 'div.video', function (e) {
        e.stopPropagation();
        var videoID = jQuery(this).attr("vid");
        jQuery(this).css('background-color', 'red');
        jQuery(this).find("iframe").css('width', '0px').css('height', '0px');
        jQuery(this).find(".liveButton a").css('display', 'block');
        clearInterval(timerID);

    }).mouseout(function () {
        jQuery('div.video').css('background-color', 'white').css('color', 'white');
        jQuery(this).find("iframe").css('width', '200px').css('height', '200px');
        jQuery(this).find(".liveButton a").css('display', 'none');
        var timerid = setInterval(5000);
    });
});

Answer 1

         var timerId = setInterval(myInterval, 5000);
         function myInterval() {
            var name = "name";
            jQuery.ajax({
              url: "/ajax-includes/index.php",
              type: 'POST',
              dataType: 'html',
              data: {name:name},
              beforeSend: function () {
                    jQuery('#progress').html('processing...');
               },
              success: function(data, textStatus, xhr) {
                jQuery('#bodyMain').html(data)
              },
              error: function(jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.n' + jqXHR.responseText);
                    }
                }
             }
    jQuery(document).on('mouseover','div.video',function(e){
            e.stopPropagation();
            var videoID = jQuery(this).attr("vid");
            jQuery(this).css('background-color','red');
            jQuery(this).find("iframe").css('width','0px').css('height','0px');
            jQuery(this).find(".liveButton a").css('display','block');
                        clearInterval(timerID);

         }).mouseout(function(){
            jQuery('div.video').css('background-color','white').css('color','white');   
            jQuery(this).find("iframe").css('width','200px').css('height','200px');
            jQuery(this).find(".liveButton a").css('display','none');
clearInterval(timerId);
timerId = setInterval(myInterval, 5000);
         });

Answer 2

var timer = null;
function doAjax(){
    var name = "name";
    jQuery.ajax({
   // do all your stuff here    
 }

现在

function start() {  
    timer = setInterval(doAjax, 5000);
}
function stop() {
    clearInterval(timer);
}

在你的鼠标悬停和鼠标移出

 jQuery(document).on('mouseover','div.video',function(e){
            stop();
            // do other stuff
  }).mouseout(function(){
            start();
            // do other stuff
 });

Answer 3

如何替换:

 }).mouseout(function(){
    jQuery('div.video').css('background-color','white').css('color','white');   
    jQuery(this).find("iframe").css('width','200px').css('height','200px');
    jQuery(this).find(".liveButton a").css('display','none');
         var timerid = setInterval(5000);
 });

 }).mouseout(function(){
    jQuery('div.video').css('background-color','white').css('color','white');   
    jQuery(this).find("iframe").css('width','200px').css('height','200px');
    jQuery(this).find(".liveButton a").css('display','none');
    timerid();
 });

Answer 4

使用setInterval时，需要在时间之前传递一个函数。

我建议你做的是，当你第一次创建你的var timerid，创建它像这样:

var timerId = setInterval(functionName, 5000);

在计时器中的函数是这样的:

function functionName() { yourCode }

然后在mouseout上，而不是做

var timerid = setInterval(5000);

timerid = setInterval(functionName, 5000);

Answer 5

试试这个…你需要pass in a function for the setInterval method。还要将timerId声明为对您正在使用的所有事件可用的变量。您声明的方式仅限于mouseout函数。因此，在mouseover函数上下文中，它总是未定义的。

jQuery(function () {
    var ajaxCall = function () {
        var name = "name";
        jQuery.ajax({
            url: "/ajax-includes/index.php",
            type: 'POST',
            dataType: 'html',
            data: {
                name: name
            },
            beforeSend: function () {
                jQuery('#progress').html('processing...');
            },
            success: function (data, textStatus, xhr) {
                jQuery('#bodyMain').html(data)
            },
            error: function (jqXHR, exception) {
                if (jqXHR.status === 0) {
                    alert('Not connect.n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found. [404]');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error [500].');
                } else if (exception === 'parsererror') {
                    alert('Requested JSON parse failed.');
                } else if (exception === 'timeout') {
                    alert('Time out error.');
                } else if (exception === 'abort') {
                    alert('Ajax request aborted.');
                } else {
                    alert('Uncaught Error.n' + jqXHR.responseText);
                }
            }
        });
    }

    var timerId = setInterval( ajaxCall, 5000);
    jQuery(document).on('mouseover', 'div.video', function (e) {
        e.stopPropagation();
        var videoID = jQuery(this).attr("vid");
        jQuery(this).css('background-color', 'red');
        jQuery(this).find("iframe").css('width', '0px').css('height', '0px');
        jQuery(this).find(".liveButton a").css('display', 'block');
        clearInterval(timerID);

    }).mouseout(function () {
        jQuery('div.video').css('background-color', 'white').css('color', 'white');
        jQuery(this).find("iframe").css('width', '200px').css('height', '200px');
        jQuery(this).find(".liveButton a").css('display', 'none');
        timerid = setInterval(ajaxCall, 5000);
    });
});