jQuery auto refresh - прервать загрузку страницы при нажатии кнопки

Question

У меня есть панель, в которой есть div, содержит содержимое панели. И это освежает себя из локальной базы данных каждые 10 секунд. (И есть еще одна функция для часов). Это мой код:

setTimeout('sensorcells_load()', 10000); 
function sensorcells_load() 
{ 
    jQuery('#sensorcells').load('dashboard_content.php'); 
    setTimeout('sensorcells_load()', 10000); 
    clock();   
} 

Моя проблема, когда я нажимаю кнопку в панели инструментов, что иногда требуется время, чтобы получить детализированную страницу. Я предполагаю, что это потому, что мне нужно подождать .load ('dashboard_content.php'). Как я могу остановить загрузку страницы, когда я нажимаю кнопку каких-либо деталей?

Answer 1

Попробуйте использовать window.onbeforeunload с глобальной .ajax() функции и .abort().

var loadTimeout = setTimeout('sensorcellsLoad()', 3000); 
function sensorcellsLoad(){ 
    window.ajaxRequest = jQuery.ajax({ 
     url: 'dashboard_content.php', 
     success: function(data) { 
     jQuery('#sensorcells').html(data); 
     loadTimeout = setTimeout('sensorcellsLoad()', 3000); 
     } 
    }); 
    clock(); 
} 


window.onbeforeunload = function() { 
    clearTimeout(loadTimeout); 
    window.ajaxRequest.abort(); 
}; 

Это всегда будет останавливать ваш тайм-аут перед выгрузкой текущей страницы, независимо от того, как вы ее выгрузите.

Кроме того, добавление глобальной varible как следующий может быть хорошей практикой:

var pageIsBeingRefreshed = false; 

window.onbeforeunload = function() { 
    pageIsBeingRefreshed = true; 
}; 

Это позволит фильтровать, если Аякса произошла ошибка из-за фактической ошибки или всей перезагрузки страницы.

if (pageIsBeingRefreshed) { 
    return; 
} else { 
    //Do some actual error handling. 
} 

Update: Я изменил исходный код, чтобы сделать использование глобальных оконных объектов для Ajax обработки.

JSFiddle можно найти здесь: http://jsfiddle.net/cnoL26ve/1/

Answer 2

Использование clearTimeout() как,

var t=setTimeout('sensorcells_load()', 10000); 
function sensorcells_load() 
{ 
    jQuery('#sensorcells').load('dashboard_content.php'); 
    t = setTimeout('sensorcells_load()', 10000); 
    clock();   
} 
// let your button id is stopLoading 
$('#stopLoading').on('click',function(){ 
    clearTimeout(t); 
}); 

Update: Если вы хотите, чтобы время наши после ваших операций базы данных выполняются, то использовать load() обратного вызова, как,

setTimeout('sensorcells_load()', 10000); 
function sensorcells_load() 
{ 
    jQuery('#sensorcells').load('dashboard_content.php',function(){ 
     setTimeout('sensorcells_load()', 10000); // wait for response then again load after 10 seconds 
    });   
    clock();   
}