jQuery의 deferred.progress() 메서드: 비동기 작업의 진행 상태 모니터링

jQuery의 deferred.progress() 메서드는 Deferred 객체가 진행 중일 때 실행할 콜백 함수를 지정하는 데 사용됩니다. 이를 통해 비동기 작업의 진행 상태를 모니터링하고 필요한 조치를 취할 수 있습니다. 이제 deferred.progress() 메서드에 대해 자세히 알아보고 예제를 통해 이해해보겠습니다.

deferred.progress() 메서드 이해하기

deferred.progress() 메서드는 Deferred 객체가 진행 중일 때 실행할 콜백 함수를 지정합니다. Deferred 객체는 비동기 작업의 상태를 나타내며, 이 메서드를 사용하여 작업이 진행 중일 때 콜백 함수를 호출할 수 있습니다.

구문:

deferred.progress(progressCallbacks);

• progressCallbacks: 진행 상태가 변경될 때 호출할 콜백 함수입니다.

이제 몇 가지 예제를 통해 이 메서드의 사용법을 살펴보겠습니다.

예제:

예제 1: 진행 상태 모니터링

var deferred = $.Deferred();

deferred.progress(function(progress) {
  console.log("진행 중:", progress);
});

// 비동기 작업 진행 중
setTimeout(function() {
  deferred.notify("20% 진행됨");
}, 1000);

setTimeout(function() {
  deferred.notify("50% 진행됨");
}, 2000);

출력:

// 1초 후
진행 중: 20% 진행됨
// 2초 후
진행 중: 50% 진행됨

예제 2: 진행 상태 처리와 함께 사용하기

var deferred = $.ajax({ url: "example.php" });

deferred.progress(function(progress) {
  console.log("진행 중:", progress);
});

출력: (실제 출력은 비동기 작업에 따라 다를 수 있습니다)

예제 3: 여러 작업의 진행 상태 모니터링

var deferred1 = $.Deferred();
var deferred2 = $.Deferred();

deferred1.progress(function(progress) {
  console.log("작업 1 진행 중:", progress);
});

deferred2.progress(function(progress) {
  console.log("작업 2 진행 중:", progress);
});

setTimeout(function() {
  deferred1.notify("작업 1: 50% 진행됨");
}, 1000);

setTimeout(function() {
  deferred2.notify("작업 2: 70% 진행됨");
}, 1500);

출력:

// 1초 후
작업 1 진행 중: 작업 1: 50% 진행됨
// 1.5초 후
작업 2 진행 중: 작업 2: 70% 진행됨

deferred.progress() 메서드를 사용하면 비동기 작업의 진행 상태를 모니터링하여 필요한 조치를 취할 수 있습니다. 이를 통해 비동기 작업의 진행 상태를 효과적으로 관리할 수 있습니다.