Ознайомлення з функціями зворотного дзвінка в JavaScript

Я розумію перехід функції до іншої функції як зворотний виклик і його виконання, але я не розумію найкращої реалізації для цього. Я шукаю дуже базовий приклад, наприклад:

var myCallBackExample = {
    myFirstFunction : function( param1, param2, callback ) {
        // Do something with param1 and param2.
        if ( arguments.length == 3 ) {
            // Execute callback function.
            // What is the "best" way to do this?
        }
    },
    mySecondFunction : function() {
        myFirstFunction( false, true, function() {
            // When this anonymous function is called, execute it.
        });
    }
};

У моїй myFirstFunction, якщо я повертаю новий зворотний виклик (), він працює і виконує анонімну функцію, але це не здається правильним підходом до мене.

Можна просто сказати

callback();

Крім того, ви можете використовувати callметод, якщо ви хочете відрегулювати значення thisзворотного дзвінка.

callback.call( newValueForThis);

Всередині функції thisбуло б все, що newValueForThisє.

Ви повинні перевірити, чи існує зворотний виклик і чи виконується функція:

if (callback && typeof(callback) === "function") {
    // execute the callback, passing parameters as necessary
    callback();
}

Багато бібліотек (jQuery, dojo тощо) використовують аналогічну схему для своїх асинхронних функцій, а також node.js для всіх функцій асинхронізації (зазвичай nodejs переходить errorі dataдо зворотного виклику). Перегляд їх вихідного коду допоможе!

Існує 3 основні можливості для виконання функції:

var callback = function(x, y) {
    // "this" may be different depending how you call the function
    alert(this);
};

1. зворотний виклик (аргумент_1, аргумент_2);
2. callback.call (some_object, argument_1, argument_2);
3. callback.apply (some_object, [argument_1, argument_2]);

Вибраний спосіб залежить від того:

1. У вас аргументи зберігаються в масиві або як окремі змінні.
2. Ви хочете викликати цю функцію в контексті якогось об'єкта. У цьому випадку використання ключового слова "це" у цьому зворотному дзвінку посилатиметься на об'єкт, переданий як аргумент у call (), або застосувати (). Якщо ви не хочете передавати контекст об'єкта, використовуйте null або undefined. В останньому випадку глобальний об’єкт буде використовуватися для "цього".

Документи для Function.call , Function.apply

Відкликання дзвінків - це сигнали, а "нове" - про створення об'єктів.

У цьому випадку було б ще доцільніше виконати просто "callback ();" ніж "повернути новий зворотний виклик ()", оскільки ви все одно нічого не робите зі значенням повернення.

(І аргумент argument.length == 3 дійсно незграбний, fwiw, краще перевірити, чи існує парам зворотного виклику і є функцією.)

належною реалізацією було б:

if( callback ) callback();

це робить параметр зворотного виклику необов’язковим ..

Ви можете використовувати:

if (callback && typeof(callback) === "function") {
    callback();
}

Наведений нижче приклад трохи більш вичерпний:

function mySandwich(param1, param2, callback) {
  alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
  var sandwich = {
      toppings: [param1, param2]
    },
    madeCorrectly = (typeof(param1) === "string" && typeof(param2) === "string") ? true : false;
  if (callback && typeof(callback) === "function") {
    callback.apply(sandwich, [madeCorrectly]);
  }
}

mySandwich('ham', 'cheese', function(correct) {
  if (correct) {
    alert("Finished eating my " + this.toppings[0] + " and " + this.toppings[1] + " sandwich.");
  } else {
    alert("Gross!  Why would I eat a " + this.toppings[0] + " and " + this.toppings[1] + " sandwich?");
  }
});

Ось основний приклад, який пояснює callback()функцію в JavaScript:

var x = 0;

function testCallBack(param1, param2, callback) {
  alert('param1= ' + param1 + ', param2= ' + param2 + ' X=' + x);
  if (callback && typeof(callback) === "function") {
    x += 1;
    alert("Calla Back x= " + x);
    x += 1;
    callback();
  }
}

testCallBack('ham', 'cheese', function() {
  alert("Function X= " + x);
});

JSFiddle