Question

我有一个在5秒后在文档加载时运行的函数，在鼠标悬停时，我想停止setInterval，然后在mouseout上重置它。我已经阅读了加载教程，但无法使其工作。

我的代码如下：

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

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

我建议您在首次创建var timerid时，按照以下方式创建：

var timerId = setInterval(functionName, 5000);

计时器中的函数将如下所示：

function functionName() { yourCode }

然后在mouseout上，而不是

var timerid = setInterval(5000);

做

timerid = setInterval(functionName, 5000);

请注意，您已经创建了它，因此无需重写var。

Answer 3

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 4

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

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

});

Answer 5

如何替换：

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

如何在鼠标输出时重新启动setInterval

5 个答案: