jQuery의 deferred.notify() 메서드: 진행 상태 업데이트 예제와 설명

jQuery의 deferred.notify() 메서드는 Deferred 객체의 진행 상태를 업데이트하는 데 사용됩니다. 이 메서드를 사용하면 비동기 작업의 진행 상태를 감지하고 관련 정보를 전달할 수 있습니다. 이제 deferred.notify() 메서드에 대해 자세히 살펴보고 예제를 통해 이해해보겠습니다.

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

deferred.notify() 메서드는 Deferred 객체의 진행 상태를 업데이트하고, 진행 중인 작업의 정보를 전달합니다. 이 메서드를 사용하여 비동기 작업의 진행 상태를 감지하고 관련 정보를 제공할 수 있습니다.

구문:

deferred.notify(message);

• message: 진행 상태에 대한 메시지나 데이터입니다.

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

예제:

예제 1: 진행 상태 업데이트

var deferred = $.Deferred();

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

deferred.notify("20% 진행됨");
deferred.notify("50% 진행됨");
deferred.notify("80% 진행됨");

출력:

진행 중: 20% 진행됨
진행 중: 50% 진행됨
진행 중: 80% 진행됨

예제 2: 여러 단계의 진행 상태 업데이트

var deferred = $.Deferred();

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

deferred.notify("스텝 1: 데이터 로딩 중...");
// 데이터 로딩 완료 후
deferred.notify("스텝 2: 데이터 처리 중...");
// 데이터 처리 완료 후
deferred.notify("스텝 3: 결과 생성 중...");

출력:

진행 중: 스텝 1: 데이터 로딩 중...
진행 중: 스텝 2: 데이터 처리 중...
진행 중: 스텝 3: 결과 생성 중...

예제 3: Promise와 함께 사용하기

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

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

setTimeout(function() {
  promise.notify("데이터 로딩 중...");
}, 500);

setTimeout(function() {
  promise.notify("데이터 처리 중...");
}, 1000);

출력:

// 0.5초 후
진행 중: 데이터 로딩 중...

// 1초 후
진행 중: 데이터 처리 중...

deferred.notify() 메서드를 사용하면 Deferred 객체의 진행 상태를 업데이트하고 관련 정보를 전달할 수 있습니다. 이를 통해 비동기 작업의 진행 상태를 쉽게 관리하고 모니터링할 수 있습니다.