2013-05-13 111 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(); 
});