AJAX 요청을 정기적으로 실행하는 방법은 무엇입니까?


113
<meta http-equiv="Refresh" Content="5">

이 스크립트는 5 초마다 페이지를 다시로드하거나 새로 고칩니다. 하지만 jQuery 및 AJAX 호출을 사용하여 수행하고 싶습니다. 가능할까요?

답변:


281

다른 사람들이 지적했듯이 setInterval 및 setTimeout이 트릭을 수행합니다. Paul Irish의 훌륭한 비디오에서 배운 좀 더 고급 기술을 강조하고 싶었습니다. http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

반복 간격보다 오래 걸릴 수있는주기적인 작업 (예 : 느린 연결의 HTTP 요청)에는를 사용하지 않는 것이 가장 좋습니다 setInterval(). 첫 번째 요청이 완료되지 않고 다른 요청을 시작하면 공유 리소스를 소비하고 서로 굶주리는 여러 요청이있는 상황이 될 수 있습니다. 마지막 요청이 완료 될 때까지 다음 요청을 예약 할 때까지 기다리면이 문제를 피할 수 있습니다.

// Use a named immediately-invoked function expression.
(function worker() {
  $.get('ajax/test.html', function(data) {
    // Now that we've completed the request schedule the next one.
    $('.result').html(data);
    setTimeout(worker, 5000);
  });
})();

간단하게 스케줄링에 성공 콜백을 사용했습니다. 이것의 단점은 하나의 실패한 요청이 업데이트를 중지한다는 것입니다. 이를 방지하려면 대신 전체 콜백을 사용할 수 있습니다.

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    }
  });
})();

3
이것은 재귀 함수 호출과 같지 않습니까? 그렇다면 재귀 적이기 때문에 오랜 시간 동안 계속해서 실행해도 괜찮습니까? 긴 AJAX 성공적 실행 유지뿐만 무한 순환하는 경우가 될 수있다
라울 돌

1
또한 setTimeout을 사용하는 경우이 코드 블록 외부에서이 스레드를 중지하는 방법이 있습니까? setInterval과 마찬가지로 clearInterval ()을 호출하면됩니다.
Rahul Dole

16
@RahulDole 좋은 질문이지만 재귀 적이 지 않습니다. 작업자 함수에서 직접 호출되지 않으므로 스택이 계속 증가하지 않습니다. 두 번째 요점은 setTimeout ()에 대한 문서를 확인하면 clearTimeout ()에 전달할 수있는 숫자 ID를 반환하는 것을 볼 수 있습니다.
drewish

7
@RahulDole 크롬을 사용하는 경우 console.trace ()를 사용하여 함수의 호출 스택을 확인하십시오. setTimeout ()에 의해 호출 된 함수는 매우 짧은 스택을 가지며 setTimeout ()을 호출 한 함수를 포함하지 않을 것입니다.
drewish

1
@Anupal은 새로운 질문을 만듭니다.
drewish

34

예, JavaScript setTimeout()방법 또는setInterval() 메서드를 사용하여 실행하려는 코드를 호출 할 수 있습니다. setTimeout을 사용하여 수행하는 방법은 다음과 같습니다.

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

1
setTimeout (executeQuery, 5000); setTimeout ( 'executeQuery ()', 5000 대신); -더 짧고 빠릅니다.
rsp

4

당신이 사용할 수있는 setTimeout 또는 setInterval.

차이점은 setTimeout은 함수를 한 번만 트리거 한 다음 다시 설정해야한다는 것입니다. setInterval은 중지하도록 지시하지 않는 한 계속해서 표현식을 트리거합니다.


1

아래 코드를 시도했습니다.

    function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

지정된 간격 동안 예상대로 작동하지 않았고 페이지가 완전히로드되지 않았고 함수가 계속 호출되었습니다. 아래와 같이 별도의 함수로 setTimeout(executeQuery, 5000);외부 를 호출하는 것이 좋습니다 executeQuery().

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  updateCall();
}

function updateCall(){
setTimeout(function(){executeQuery()}, 5000);
}

$(document).ready(function() {
  executeQuery();
});

이것은 의도 한대로 정확하게 작동했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.