JavaScript: clearInterval не будет очищать интервал

101
16

У меня необычная проблема. Я использую следующий скрипт для проверки подключения к Интернету с помощью navigator.onLine. Если есть интернет-соединение, страница будет обновляться каждые 15 секунд. Если интернет-соединение отсутствует, страница будет использовать innerHTML для отображения сообщения.

<script type="text/javascript">
setInterval(function () {
if (navigator.onLine) {
var myInterval = setInterval(function(){window.location.href = "Tracker.html";},15000);
} else {
clearInterval(myInterval);
var changeMe = document.getElementById("change");
change.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
}
}, 250);
</script>

Моя проблема в том, что когда интернет-соединение отсутствует, сообщение будет отображаться, НО страница все равно будет обновляться в последний раз. Я пытаюсь избежать этого, используя clearInterval(myInterval); в else части кода, однако это не сработает.

Какие-либо предложения?

спросил(а) 2012-12-29T22:07:00+04:00 7 лет, 8 месяцев назад
1
Решение
70

Чтобы обновить страницу с интервалом 15 секунд (при условии наличия соединения), используйте:

function refresh() {
if(navigator.onLine)
window.location.href = "Tracker.html";
else{
var changeMe = document.getElementById("change");
change.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
setTimeout(refresh, 250);
}
}
setTimeout(refresh, 15000);

В конце 15 секунд это проверяет наличие соединения. Если есть, он обновляет страницу. Если этого не происходит, он будет проверяться каждые 250 миллисекунд после этого, пока пользователь не будет повторно подключен, после чего он обновит страницу.

Конечным результатом является то, что сценарий обновляет страницу как можно скорее после того, как прошло как минимум 15 секунд.

Вот демонстрация: http://jsfiddle.net/JGEt9/show

ответил(а) 2012-12-29T22:17:00+04:00 7 лет, 8 месяцев назад
69

Всякий раз, когда выполняется обратный вызов внешнего интервала, создается новая переменная myInterval а предыдущая потеряна (она выходит за пределы области действия, так как обратный вызов завершается).

Вы должны сохранить значение переменной между вызовами функций, объявив ее вне функции. Вы также должны убедиться, что вы не создаете другой тайм-аут, если он уже запущен.


var timeout = null;

setInterval(function () {
if (navigator.onLine) {
if (timeout === null) {
timeout = setInterval(function(){window.location.href = "Tracker.html";},15000);
}
} else {
clearTimeout(timeout);
timeout = null;
// ...
}
}, 250);

ответил(а) 2012-12-29T22:11:00+04:00 7 лет, 8 месяцев назад
57

Вам нужно объявить myInterval вне инструкции if. Вам также потребуется только код обновления. Что-то вроде этого:

var myInterval = setTimeout(function(){window.location.href = "Tracker.html";},15000);
setInterval(function () {
if (!navigator.onLine) {
clearTimeout(myInterval);
var changeMe = document.getElementById("change");
changeMe.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
}
}, 250);

Здесь вы устанавливаете интервал обновления и постоянно проверяете, находится ли браузер в автономном режиме, и если это так, вы удаляете таймер и выполняете свой код очистки. Я также изменил код обновления, чтобы использовать setTimeout вместо интервала, потому что это происходит только один раз.

Другая проблема заключается в том, что вы создаете changeMe но затем пытаетесь использовать change. change не существует. Я исправил это и в моем примере.

Примечание. Это не возобновит обновление после восстановления соединения. См. Ответ Феликса Клинга.

ответил(а) 2012-12-29T22:09:00+04:00 7 лет, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема