Каков оптимальный способ использования setInterval в jQuery jQuery?

Question

Я использую JQWidgets, чтобы создать круговую диаграмму. И в то время как все это прекрасно и денди и работает как шарм. Однако я хотел бы обновить данные каждые x секунд. Использование JQuery, вот код, который я до сих пор:

function loadChart(id,name){ 
    //chart loads here 
    var speed = 5000, 
     t = setInterval(reloadData,speed); 
    function reloadData() { 
     source.url = 'data.php?id='+id; 
     var dataAdapter = new $.jqx.dataAdapter(source); 
     $('#pie').jqxChart({ source: dataAdapter }); 
     console.log('reloading pie...'+globalPieId); 
     speed = 5000; 
     clearInterval(t); 
     t = setInterval(reloadData, speed); 
    } 
} 

Моя проблема в том, что если функция loadChart называется, другой экземпляр setInterval создается, и после того, как три или четыре раза, на графике находится в постоянное состояние обновления. Как оптимизировать мой вызов setInterval для вызова только одного экземпляра?

Заранее спасибо.

Answer 1

Вам нужно очистить существующий интервал перед установкой нового. Попробуйте следующий трюк.

function loadChart(id, name) { 
    // We use a trick to make our 'interval' var kinda static inside the function. 
    // Its value will not change between calls to loadChart(). 
    var interval = null; 

    // This is the core of a trick: replace outer function with inner helper 
    // that remembers 'interval' in its scope. 
    loadChart = realLoadChart; 
    return realLoadChart(id, name); 

    function realLoadChart(id, name) { 
     var speed = 5000; 

     // Remove old interval if it exists, then set up a new one 
     interval && clearInterval(interval); 
     interval = setInterval(reloadData, speed); 

     function reloadData() { 
      // ... your code, but no do nothing with interval here ... 
     } 
    } 
} 

Answer 2

Вместо использования setInterval, который вызывает функцию снова и снова, вам было бы лучше использовать функцию setTimeout, которая будет вызывать обратный вызов, который вы укажете только один раз. Как только вызов будет вызван, вы можете снова позвонить setTimeout, и вы перестанете испытывать проблемы, с которыми вы сейчас сталкиваетесь. Также вы будете ждать, пока последний вызов не будет выполнен, прежде чем вы начнете делать еще одно, что тоже хорошо. Код может выглядеть следующим образом с изменением:

function loadChart(id,name){ 
    //chart loads here 
    var speed = 5000, 
     t = setTimeout(reloadData,speed); 
    function reloadData() { 
     source.url = 'data.php?id='+id; 
     var dataAdapter = new $.jqx.dataAdapter(source); 
     $('#pie').jqxChart({ source: dataAdapter }); 
     console.log('reloading pie...'+globalPieId); 
     speed = 5000; 
     t = setTimeout(reloadData, speed); 
    } 
} 

Для рабочего РОС вы могли видеть http://jsfiddle.net/9QFS2/