Como posso criar uma função assíncrona em Javascript?

Confira este código :

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

Como você pode ver no console, a função "animar" é assíncrona e "bifurca" o fluxo do código de bloco do manipulador de eventos. De fato :

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

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

siga o fluxo do código de bloco!

Se eu quiser criar o meu function asyncFunct() { }com esse comportamento, como posso fazê-lo com javascript / jquery? Eu acho que há uma estratégia sem o uso de setTimeout()

Você não pode criar uma função assíncrona verdadeiramente personalizada. Eventualmente, você terá que aproveitar uma tecnologia fornecida nativamente, como:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Algumas APIs HTML5, como a API de arquivos, a API de banco de dados da Web
• Tecnologias que suportam onload
• ... muitos outros

De fato, para a animação que o jQuery usa setInterval .

Você pode usar um timer:

setTimeout( yourFn, 0 );

(onde yourFné uma referência à sua função)

ou, com Lodash :

_.defer( yourFn );

Adia a chamada funcaté que a pilha de chamadas atual seja limpa. Quaisquer argumentos adicionais são fornecidos funcquando são chamados.

aqui você tem uma solução simples (outros escrevem sobre isso) http://www.benlesh.com/2012/05/calling-javascript-function.html

E aqui você tem a solução pronta acima:

function async(your_function, callback) {
    setTimeout(function() {
        your_function();
        if (callback) {callback();}
    }, 0);
}

TESTE 1 ( pode gerar '1 x 2 3' ou '1 2 x 3' ou '1 2 3 x' ):

console.log(1);
async(function() {console.log('x')}, null);
console.log(2);
console.log(3);

TESTE 2 ( sempre gera 'x 1' ):

async(function() {console.log('x');}, function() {console.log(1);});

Esta função é executada com o tempo limite 0 - simulará tarefas assíncronas

Aqui está uma função que assume outra função e gera uma versão que executa assíncrona.

var async = function (func) {
  return function () {
    var args = arguments;
    setTimeout(function () {
      func.apply(this, args);
    }, 0);
  };
};

É usado como uma maneira simples de criar uma função assíncrona:

var anyncFunction = async(function (callback) {
    doSomething();
    callback();
});

Isso é diferente da resposta do @ fider porque a função em si tem sua própria estrutura (nenhum retorno de chamada foi adicionado, já está na função) e também porque cria uma nova função que pode ser usada.

Edit: Eu entendi totalmente a pergunta. No navegador, eu usaria setTimeout. Se fosse importante que fosse executado em outro segmento, eu usaria Web Workers .

Tarde, mas para mostrar uma solução fácil promisesapós a introdução no ES6 , ele lida com chamadas assíncronas muito mais fácil:

Você define o código assíncrono em uma nova promessa:

var asyncFunct = new Promise(function(resolve, reject) {
    $('#link').animate({ width: 200 }, 2000, function() {
        console.log("finished");                
        resolve();
    });             
});

Nota para definir resolve()quando a chamada assíncrona termina.
Em seguida, adicione o código que deseja executar após a conclusão da chamada assíncrona dentro .then()da promessa:

asyncFunct.then((result) => {
    console.log("Exit");    
});

Aqui está um trecho:

$('#link').click(function () {
    console.log("Enter");
    var asyncFunct = new Promise(function(resolve, reject) {
        $('#link').animate({ width: 200 }, 2000, function() {
            console.log("finished");            	
            resolve();
        }); 			
    });
    asyncFunct.then((result) => {
        console.log("Exit");    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link">Link</a>
<span>Moving</span>

ou JSFiddle

Esta página mostra os conceitos básicos da criação de uma função javascript assíncrona.

Desde o ES2017, as funções assíncronas de javacript são muito mais fáceis de escrever. Você também deve ler mais sobre promessas .

Se você deseja usar Parâmetros e regular o número máximo de funções assíncronas, pode usar um trabalhador assíncrono simples que eu construí:

var BackgroundWorker = function(maxTasks) {
    this.maxTasks = maxTasks || 100;
    this.runningTasks = 0;
    this.taskQueue = [];
};

/* runs an async task */
BackgroundWorker.prototype.runTask = function(task, delay, params) {
    var self = this;
    if(self.runningTasks >= self.maxTasks) {
        self.taskQueue.push({ task: task, delay: delay, params: params});
    } else {
        self.runningTasks += 1;
        var runnable = function(params) {
            try {
                task(params);
            } catch(err) {
                console.log(err);
            }
            self.taskCompleted();
        }
        // this approach uses current standards:
        setTimeout(runnable, delay, params);
    }
}

BackgroundWorker.prototype.taskCompleted = function() {
    this.runningTasks -= 1;

    // are any tasks waiting in queue?
    if(this.taskQueue.length > 0) {
        // it seems so! let's run it x)
        var taskInfo = this.taskQueue.splice(0, 1)[0];
        this.runTask(taskInfo.task, taskInfo.delay, taskInfo.params);
    }
}

Você pode usá-lo assim:

var myFunction = function() {
 ...
}
var myFunctionB = function() {
 ...
}
var myParams = { name: "John" };

var bgworker = new BackgroundWorker();
bgworker.runTask(myFunction, 0, myParams);
bgworker.runTask(myFunctionB, 0, null);

Function.prototype.applyAsync = function(params, cb){
      var function_context = this;
      setTimeout(function(){
          var val = function_context.apply(undefined, params); 
          if(cb) cb(val);
      }, 0);
}

// usage
var double = function(n){return 2*n;};
var display = function(){console.log(arguments); return undefined;};
double.applyAsync([3], display);

Embora não seja fundamentalmente diferente das outras soluções, acho que minha solução faz mais algumas coisas legais:

• permite parâmetros para as funções
• passa a saída da função para o retorno de chamada
• é adicionado a Function.prototypepermitir uma maneira melhor de chamá-lo

Além disso, a semelhança com a função Function.prototype.applyinterna parece apropriada para mim.

Ao lado da ótima resposta de @pimvdb, e no caso de você estar se perguntando, o async.js também não oferece funções verdadeiramente assíncronas. Aqui está uma versão (muito) simplificada do método principal da biblioteca:

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

Portanto, a função protege contra erros e a entrega normalmente ao retorno de chamada, mas o código é tão síncrono quanto qualquer outra função JS.

Infelizmente, o JavaScript não fornece uma funcionalidade assíncrona. Funciona apenas em um único segmento. Mas a maioria dos navegadores modernos fornece Workers , que são segundos scripts que são executados em segundo plano e podem retornar um resultado. Então, cheguei a uma solução que acho útil executar de forma assíncrona uma função, que cria um trabalhador para cada chamada assíncrona.

O código abaixo contém a função async para chamar em segundo plano.

Function.prototype.async = function(callback) {
    let blob = new Blob([ "self.addEventListener('message', function(e) { self.postMessage({ result: (" + this + ").apply(null, e.data) }); }, false);" ], { type: "text/javascript" });
    let worker = new Worker(window.URL.createObjectURL(blob));
    worker.addEventListener("message", function(e) {
        this(e.data.result);
    }.bind(callback), false);
    return function() {
        this.postMessage(Array.from(arguments));
    }.bind(worker);
};

Este é um exemplo de uso:

(function(x) {
    for (let i = 0; i < 999999999; i++) {}
        return x * 2;
}).async(function(result) {
    alert(result);
})(10);

Isso executa uma função que itera um fornúmero enorme para levar tempo como demonstração de assincronicidade e, em seguida, obtém o dobro do número passado. O asyncmétodo fornece um functionque chama a função desejada em segundo plano e o que é fornecido como parâmetro de asyncretornos de chamada returnem seu parâmetro exclusivo. Então, na função de retorno de chamada, alerto resultado.

O MDN tem um bom exemplo do uso de setTimeout preservando "this".

Como o seguinte:

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

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