0

我有一个函数在 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);
    });
});

任何帮助都会非常感谢。

4

5 回答 5

0

更换怎么样：

 }).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();
 });
于 2013-05-13T19:58:53.323 回答
0 
var timer = null;
function doAjax(){
    var name = "name";
    jQuery.ajax({
   // do all your stuff here    
 }

Now -

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

function stop() {
    clearInterval(timer);
}

In your mouseover and mouseout

 jQuery(document).on('mouseover','div.video',function(e){
            stop();
            // do other stuff
  }).mouseout(function(){
            start();
            // do other stuff
 });
于 2013-05-13T19:39:01.523 回答
0

Try this .. You need to pass in a function for the setInterval method. Also declare the timerId as a variable available to all the events that you are using . The way you are declaring is confined to only the mouseout function . So it will always be undefined in the mouseover function context.

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

});
于 2013-05-13T19:39:03.910 回答
0 
         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);
         });
于 2013-05-13T19:37:35.067 回答
0

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

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

var timerId = setInterval(functionName, 5000);

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

function functionName() { yourCode }

然后在mouseout, 而不是做

var timerid = setInterval(5000);

做

timerid = setInterval(functionName, 5000);

请注意，您不需要重写 var ，因为您已经创建了它。

于 2013-05-13T19:37:44.060 回答