Как я могу создать асинхронную функцию в Javascript?

Question

Проверьте этот код :

<a href="#" id="link">Link</a>
<span>Moving</span>

$('#link').click(function () {
    console.log("Enter");
    $('#link').animate({ width: 200 }, 2000, function() {
         console.log("finished");            
    });    
    console.log("Exit");    
});

Как вы можете видеть в консоли, функция "animate" является асинхронной, и она "разветвляет" поток событиякод блока обработчика.Фактически:

$('#link').click(function () {
    console.log("Enter");
    asyncFunct();
    console.log("Exit");    
});

function asyncFunct() {
    console.log("finished");
}

следуйте потоку кода блока!

Если я хочу создать свой function asyncFunct() { } с таким поведением, как я могу сделать это с помощью javascript / jquery?Я думаю, что есть стратегия без использования setTimeout()

Answer 1

Рядом с отличным ответом @pimvdb, и на всякий случай, если вам интересно, async.js также не предлагает действительно асинхронных функций. Вот (очень) урезанная версия основного метода библиотеки:

function asyncify(func) { // signature: func(array)
    return function (array, callback) {
        var result;
        try {
            result = func.apply(this, array);
        } catch (e) {
            return callback(e);
        }
        /* code ommited in case func returns a promise */
        callback(null, result);
    };
}

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

Answer 2

MDN имеет хороший пример об использовании setTimeout с сохранением «this».

Как и следующее:

function doSomething() {
    // use 'this' to handle the selected element here
}

$(".someSelector").each(function() {
    setTimeout(doSomething.bind(this), 0);
});