Автоматически обновляющие данные страницы с помощью ajax

Question

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

Я не хочу добавлять мета-обновление на страницу, потому что я хочу избежать перезагрузки страницы. У меня уже есть функция, которая обновляет список через ajax, поэтому я бы каждую минуту вызывал эту функцию.

Как только страница изначально загружена, как я могу повторно вызвать эту функцию, не делая блокирующий цикл javascript? Есть ли способ приостановить setInterval или что-то, что позволит остальной части пула очереди выполнить?

Я беспокоюсь об этом случаться:

$('document').ready(function() { 
     setInterval(function() { 
      updateList(); 
     }, 60000); 
} 

Answer 1

Цикл while(true) действительно блокирует выполнение всех других скриптов. setInterval не будет.

Идеальным решением будет сетевой разъем, такой как socket.io. При этом, вы могли бы что-то же просто, как

socket.on("add", function (msg) { 
    addItem(msg); 
}).on("removeItem", function (msg) { 
    removeItem(msg); 
}) 

Затем, на вашем сервере, вы могли бы просто socket.emit("messageType", msg);. Это предотвратит необходимость постоянного опроса сервера с помощью AJAX.

Однако, если это невозможно, то вы можете исправить код с

$(document).ready(function() { 
    var updateInterval = setInterval(updateList, 60000); 
    // to clear interval: clearInterval(updateInterval); 
}) 

где updateList ваша функция для опроса сервера через AJAX и добавить любые задачи, полученные на этой странице.

Answer 2

Подытоживая из комментариев:

• Вы должны избавиться от while(true), он блокирует остальную часть кода.
• setInterval() будет выполняться каждые 1 мин. так или иначе.

Обратите внимание, что после удаления while, то setInterval() не будет блокировать остальную часть кода.

Answer 3

Вы можете использовать любой из следующих двух:

setTimeout(expression, timeout);, который когда-то выполняет код/​​функции после тайм-аута. Он не блокируется, поэтому вам не нужно вводить его в цикл. Вы можете позвонить себе, чтобы он выполнялся бесконечно.

function updateFunction() { 
    setTimeout(function() { 
    //update the page here 
    updateFunction(); 
    }, 1000); 
} 

Или вы можете использовать setInterval(expression, timeout);, который выполняет код/​​функции в интервалах, с длиной таймаута между ними.

setInterval(function() { 
    //update the page here 
}, 1000);