Передача функции другой функции?

Question

Лучше ли переходить в функцию к другой функции, которая использует ее для уменьшения видимости области. Я довольно запутался в этом.

Без пропуска;

function loadSuccess(a, b, c) { 

}; 

function image(url, name, info) { 

    var asset = new Image(); 
    asset.addEventListener("load", function(name, info) { 
     return function() { 
      loadSuccess(this, name, info); 
     }; 
    }(name, info), false); 
    asset.src = url; 
}; 

image(a, b, c); 

И передать его;

function loadSuccess(a, b, c) { 

}; 

function image(url, name, info, loadSuccess) { 

    var asset = new Image(); 
    asset.addEventListener("load", function(name, info, func) { 
     return function() { 
      func(this, name, info); 
     }; 
    }(name, info, loadSuccess), false); 
    asset.src = url; 
}; 

image(a, b, c, loadSuccess); 

Answer 1

Преимущества производительности, вероятно, небрежны, но передача обратного вызова делает вашу функцию более гибкой, позволяя вам, в случае необходимости, передавать другой обратный вызов в другой ситуации.

Однако, я вижу проблему в вашем коде: tt не имеет смысла возвращать что-либо из асинхронного обратного вызова. Это не ваша функция image, которая будет ее возвращать, а внутренняя анонимная функция, которую вы передали addEventListener.

Учитывая эти проблемы, я бы изменить код следующим образом:

function loadSuccess(a, b, c) { 

}; 

function image(url, name, info, func) { 
    var asset = new Image(); 
    asset.addEventListener("load", function(e) { 
     func(this, name, info); 
    }, false); 
    asset.src = url; 
}; 

image(a, b, c, loadSuccess); 

Я также удалил сразу вызывается функция была ранее, так как я не вижу особых оснований использовать его там.

Answer 2

Оба прекрасно работают, но я считаю хорошей практикой отправить функцию обратного вызова в качестве аргумента.

Answer 3

Первый вариант - использовать, когда функция изображения всегда требует вызова этой функции loadSucces.

Второй вариант - использовать, когда вам нужно выбрать, какую функцию обратного вызова вы хотите выполнить.

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

function image(url, name, info, loadSuccessParameter) { 
    loadSuccessParameter= loadSuccessParameter || loadSuccess; 
    [...] 

} 

Таким образом, вы можете назвать это так: образ (а, б, в) или так: образ (а, б, , otherLoadSuccess);

Надеюсь, это поможет.