2013-05-13 108 views
0

我有一个函数,5秒后,在mouseover上运行的文件加载,我想停止setInterval,然后在mouseout重置它。我已阅读加载教程,但不能得到它的工作。你怎么重新启动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); 
    }); 
}); 

任何帮助将是巨大的感谢。

回答

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

非常感谢这个工作完美! – Ian 2013-05-14 19:09:07

0

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

我的建议做的是,当你第一次创建var timerid,像创建:

var timerId = setInterval(functionName, 5000); 

又是谁在定时器的功能将是这样的:

function functionName() { yourCode } 

然后在mouseout,而不是做

var timerid = setInterval(5000); 

timerid = setInterval(functionName, 5000); 

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

+0

嗨,感谢您的回复,这不适合我。它正在开始间隔,但并没有停止它。任何进一步的建议将是伟大的 干杯伊恩 – Ian 2013-05-14 19:00:29

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

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

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

}); 
+0

嗨感谢您的回复时间,但这没有为我工作。 – Ian 2013-05-14 18:27:22

+0

嘿..我初始化'计时器'变量2次..尝试删除第二个实例,然后再试 – 2013-05-14 18:29:52

+0

我刚刚尝试过,并没有工作。它正在启动时间间隔,但由于某种原因没有停止 – Ian 2013-05-14 18:49:05

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