jQuery с обратным вызовом и полным

Question

Итак, я хочу использовать функцию обратного вызова в пределах .fadeOut() после завершения анимации. Я могу сделать это успешно, используя следующее, без проблем. Работает так же, как я хочу (HTML, и CSS только один черный квадрат ДИВ)

function fadeOutThing(speed, callback) { 
    $('div').parent().fadeOut(speed, function() { 
     if (typeof callback === "function") { 
     callback(); 
     } 
    }); 
} 

function OtherThing() { 
    console.log("hello"); 
} 

fadeOutThing(5000, OtherThing); 

То, что я действительно хочу, чтобы эта функция обратного вызова имеет свой собственный аргумент, который может быть другая функция обратного вызова, как в следующем. Проблема заключается в том, что, когда я делаю это, журнал будет отображаться до завершения анимации: Here's the fiddle

function fadeOutThing(speed, callback) { 
    $('div').parent().fadeOut(speed, function() { 
     if (typeof callback === "function") { 
     callback(); 
     } 
    }); 
} 

function OtherThing(stuff) { 
    console.log("hello" + stuff); //This displays too soon! 
} 

fadeOutThing(5000, OtherThing(' stuffsss')); 

Почему это происходит? Что я не понимаю?

Answer 1

Проблема в том, что вы сразу вызываете OtherThing() при загрузке страницы. Это означает, что вы даете результат функции OtherThing() как параметр обратного вызова, а не ссылка на функцию.

Чтобы сделать то, что вам требуется вы можете предоставить анонимную функцию обратного вызова, который оборачивает ваш OtherThing() вызов:

fadeOutThing(5000, function() { 
    OtherThing(' stuffsss')); 
}); 

Answer 2

свяжите аргумент вместо вызова функции следующим образом:

fadeOutThing(5000, OtherThing.bind(this,' stuffsss')); 

Answer 3

Ваших используют функцию/вызов в атрибуте, поэтому вместо декларации функции вы отправляете ее возврат в этом случае не возвращается так:

fadeOutThing(5000, OtherThing(' stuffsss')); 

равна

fadeOutThing(5000, notDeclaredNothing); //undefined variable 

Чтобы отправить объявление функции и установить Счетчики вы могли бы сделать, например, третий В параметре:

function fadeOutThing(speed, callback,attrs) { 
    $('div').parent().fadeOut(speed, function() { 
     if (typeof callback === "function") { 
     callback(attrs); //use with attributes 
     } 
    }); 
} 

использование:

fadeOutThing(5000, OtherThing,'stuffsss'); 

Или второй вариант заключается в использовании привязки - bind создает новую функцию с данными атрибутами:

fadeOutThing(5000, OtherThing.bind(this,'stuffsss')); 

В глобальном масштабе это объект окна.