Получение лучшего понимания функций обратного вызова в 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(), то он работает и выполняет анонимную функцию, но это не похоже на правильный подход ко мне.

Ответ 1

Вы можете просто сказать

callback();

Альтернативно вы можете использовать метод call, если вы хотите отрегулировать значение this в обратном вызове.

callback.call( newValueForThis);

Внутри функции this будет любое newValueForThis.

Ответ 2

Вы должны проверить, существует ли обратный вызов и является выполняемой функцией:

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

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

Ответ 3

Существует 3 основных возможности для выполнения функции:

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

callback (аргумент_1, аргумент_2);
callback.call(some_object, argument_1, argument_2);
callback.apply(some_object, [argument_1, argument_2]);

Выбираемый метод зависит от того:

У вас есть аргументы, хранящиеся в массиве или в виде отдельных переменных.
Вы хотите вызвать эту функцию в контексте какого-либо объекта. В этом случае использование ключевого слова "this" в этом обратном вызове будет ссылаться на объект, переданный как аргумент в call() или apply(). Если вы не хотите передавать контекст объекта, используйте null или undefined. В последнем случае глобальный объект будет использоваться для "this".

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

Ответ 4

Обратные вызовы касаются сигналов, а "новый" - о создании экземпляров объектов.

В этом случае было бы еще более целесообразным выполнить только "callback();" чем "вернуть новый callback()", потому что вы ничего не делаете с возвращаемым значением.

(И тест arguments.length == 3 действительно неуклюж, fwiw, лучше проверить, что параметр обратного вызова существует и является функцией.)

Ответ 5

правильная реализация:

if( callback ) callback();

это делает параметр обратного вызова необязательным.

Ответ 6

Ты можешь использовать:

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?");
  }
});

Ответ 7

function checkCallback(cb) {
  if (cb || cb != '') {
    if (typeof window[cb] === 'undefined') alert('Callback function not found.');
    else window[cb].call(this, Arg1, Arg2);
  }
}

Ответ 8

Вот базовый пример, который объясняет 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);
});

Ответ 9

Хотя существует множество доступных руководств по JavaScript, приведенное ниже руководство дает более четкое и понятное объяснение "обратного вызова JavaScript, привязки, применения и вызова".

https://thenewstack.io/mastering-javascript-callbacks-bind-apply-call/