jQuery ajax 호출에서 setInterval을 사용하는 가장 좋은 방법은 무엇입니까?

Question

나는 JQWidgets을 사용하여 원형 차트를 만듭니다. 그리고 그것이 모두 멋지고 멋쟁이이며 매력처럼 작동하는 동안. 그러나 내가하고 싶은 것은 x 초마다 데이터를 업데이트하는 것입니다.

이

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을 다른 인스턴스가 만들어 졌는지, 그리고 서너 시간 후, 차트에 있습니다 : jQuery를 사용하여, 여기에 내가 지금까지 가지고 그 코드 새로 고침의 일정한 상태. 하나의 인스턴스 만 호출되도록 내 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); 
    } 
} 

을 작업 POC 당신은 당신이 새로운 하나를 설정하기 전에 기존의 간격을 삭제해야 http://jsfiddle.net/9QFS2/