jQuery에서 콜백을 사용하는 이유는 무엇입니까?

콜백은 jQuery 1.7에 도입된 메소드로, 동일한 메소드 매개변수를 사용하여 콜백 함수 그룹을 관리하는 데 사용됩니다. 배열과 같은 콜백을 추가, 삭제, 지우는 것 외에도 콜백은 몇 가지 특수 모드도 제공합니다. 다양한 모드에서는 콜백 함수의 수명 주기와 실행 순서가 약간 다릅니다.

콜백 열 생성(콜백)

var callbacks = $.Callbacks(flags);

매개변수 falgs는 콜백 모드를 나타내는 데 사용되는 문자열입니다. 예를 들어 "once stopOnFalse" 모드에서는 콜백이 최대 한 번만 실행됩니다. 실행 중에 false를 반환하면 콜백 열의 실행도 중단됩니다.

그럼 jQuery.Callbacks 사용 시나리오는 어디에 있나요?

많은 경우 일련의 기능의 순차적 실행을 제어해야 합니다. 그러면 일반적으로 이 문제를 처리하기 위해 큐 함수가 필요합니다

코드를 살펴보겠습니다

function Aaron(List, callback) {
    setTimeout(function() {
      var task = List.shift();
      task(); //执行函数
      if (task.length > 0) {  //递归分解
        setTimeout(arguments.callee, 1000)
      } else {
        callback()
      }
    }, 25)
  }
  Aaron([function(){
    alert('a')
  },function(){
    alert('b')
  }],function(){
    alert('callback')
  })
 
分别弹出 ‘a’ , ‘b’ ,’callback’

함수 매개변수 집합을 전달하고 이를 재귀적으로 구문 분석하고 하나씩 실행하는 것이 실제로는 원칙입니다. setTimeout을 사용하면 함수를 실행하기 전에 대기열 끝에 추가할 수 있습니다.

****그런데 이렇게 작성하는 것이 번거롭나요? *****

jQuery에서 제공하는 메소드로 전환해 보겠습니다

var callbacks = $.Callbacks();
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'

훨씬 편리하고 코드도 매우 명확하여 관리에 강력한 메소드를 제공하는 다목적 콜백 함수 목록 객체입니다. 콜백 함수 대기열.

또한 몇 가지 편리한 처리 매개변수를 제공합니다.

once: 이 콜백 목록이 한 번만 실행되는지 확인하세요(.fire())(deferred Deferred와 마찬가지로).

memory: 이 목록에 추가될 이전 값을 유지합니다. 호출된 모든 콜백(예: Deferred)은 최신 값을 사용하여 즉시 실행됩니다.

unique: 한 번에 하나의 콜백만 추가할 수 있도록 합니다(따라서 목록에 중복된 콜백이 없음). 콜백 시 false 호출을 중단하는 기능

var callbacks = $.Callbacks('once');
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'
  callbacks.fire(); //未执行

once는 콜백 대기열을 한 번만 실행하도록 하는 것입니다

콜백 모드

기본 모드: 콜백 열의 콜백은 기본적으로 여러 번 실행될 수 있으며, 콜백 함수는 반복적으로 추가될 수 있습니다. 단, 실행 중에는 새로 추가된 콜백이 실행되지 않습니다.

once: 열의 각 콜백은 최대 한 번 실행될 수 있습니다. 실행이 완료되면 콜백 함수 열이 지워집니다.

메모리: 콜백 실행 과정에서 새로운 콜백이 추가되면 새로운 콜백도 실행될 수 있습니다.

고유: 동일한 콜백을 반복해서 추가할 수 없습니다.

stopOnFalse: 특정 콜백이 false를 반환하면 메모리 모드에서도 후속 콜백이 실행되지 않습니다.

var callbacks = $.Callbacks("once memory");

콜백 실행 순서

콜백은 배열에 저장된 후 for 루프를 통해 순회하므로 열에 있는 콜백은 추가된 순서대로 실행되며, 일반적으로 마지막에 추가된 콜백이 마지막에 실행됩니다.

// Fire the items on the list
var foo = function( value ) {
  console.log( "foo:" + value );
};
// Add another function to the list
var bar = function( value ){
  console.log( "bar:" + value );
};
var callbacks = $.Callbacks();
callbacks.add( foo );
callbacks.add( bar);
callbacks.fire("hello"); 
// output: foo: hello
// output: bar: hello

유일한 예외는 표시가 메모리이고 이전에 fire()가 호출된 경우 add()에 의해 추가된 후 이전 화재의 매개변수를 사용하여 새 콜백이 즉시 실행된다는 것입니다. 그러나 add() 이전에 fire()에 의해 호출된 콜백은 fire() 또는 fireWith()를 사용하지 않으면 즉시 다시 실행되지 않습니다.

기타 포인트

콜백 함수에서 Callbacks의 fire()나 fireWith()를 호출하세요

콜백에서 Callbacks 객체의 fire()나 fireWith() 메소드가 호출되는 상황이 있습니다. 이 경우 어떻게 해야 합니까?

Jquery가 수행하는 작업: 콜백에서 fire() 또는 fireWith()가 호출되면 Callbacks 객체는 fire() 또는 fireWith()의 매개변수만 저장하고 열에서 콜백을 즉시 실행하지 않습니다. 콜백의 모든 콜백이 실행된 후 새 매개변수를 사용하여 Callbacks 개체의 모든 콜백을 다시 실행합니다.

참고: 표시가 한 번인 경우 콜백에서 fire 또는 fireWith()를 실행해도 효과가 없습니다.

function fn1( value ){
   console.log( value );
 
   if (value == "bar!") return false;
 
   callbacks.fire("bar!");
}
 
function fn2( value ){
  console.log( "fn2 says: " + value);
}
 
var callbacks =$.Callbacks("stopOnFalse");
 
callbacks.add( fn1 );
callbacks.add( fn2 );
 
// Outputs: foo!
// Outputs: fn2 says:foo!
// Outputs: bar!
callbacks.fire("foo!" );

callbacks.disable()을 호출한 후에는 콜백을 더 이상 활성화할 수 없습니다.

disable()을 호출한 후에는 콜백 함수 목록이 지워지고, fire 또는 fireWith를 사용할 때 응답이 없습니다. 따라서 콜백은 모든 콜백이 지워졌고 이를 다시 활성화할 필요가 없기 때문에 활성화 메서드를 제공하지 않습니다.

callbacks.lock()

콜백 열이 잠겨 있으며 callbacks.fire() 또는 callbacks.fireWith() 호출이 유효하지 않습니다.

callbacks.lock()이 콜백에서 호출되는 경우 주의할 점이 하나 있습니다:

콜백에는 메모리 태그가 있습니다. 현재 fire() 또는 fireWith() 메서드에서 실행되지 않는 콜백은 계속 실행됩니다. 하지만 콜백의 콜백은 계속 실행됩니다. callbacks.fire()나 callbacks.fireWith()는 더 이상 작동하지 않습니다.

콜백에는 메모리 태그가 없습니다. 모든 콜백이 지워지므로 후속 콜백이 더 이상 실행되지 않습니다.

이상한 점은 콜백이 잠금 해제 방법을 제공하지 않는다는 것입니다. 즉, 일단 잠긴 콜백은 fire() 또는 fireWith()를 호출하는 기능을 영구적으로 잃게 됩니다.

위 내용은 jQuery에서 콜백을 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!