Comment créer une fonction asynchrone en Javascript?

Découvrez ce code :

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

Comme vous pouvez le voir dans la console, la fonction "animer" est asynchrone, et elle "dérive" le flux du code de bloc du gestionnaire d'événements. En réalité :

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

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

suivez le flux du code de bloc!

Si je souhaite créer mon function asyncFunct() { }avec ce comportement, comment puis-je le faire avec javascript / jquery? Je pense qu'il ya une stratégie sans l'utilisation de setTimeout()

Vous ne pouvez pas créer une fonction asynchrone vraiment personnalisée. Vous devrez éventuellement tirer parti d'une technologie fournie de manière native, telle que:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Certaines API HTML5 telles que l'API de fichier, l'API de base de données Web
• Des technologies qui soutiennent onload
• ... beaucoup d'autres

En fait, pour l'animation que jQuery utilise setInterval .

Vous pouvez utiliser une minuterie:

setTimeout( yourFn, 0 );

(où yourFnest une référence à votre fonction)

ou, avec Lodash :

_.defer( yourFn );

Diffère l'appel de funcjusqu'à ce que la pile d'appels actuelle soit effacée. Tous les arguments supplémentaires sont fournis funclors de son invocation.

ici vous avez une solution simple (autre écrire à ce sujet) http://www.benlesh.com/2012/05/calling-javascript-function.html

Et ici, vous avez ci-dessus la solution prête:

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

TEST 1 ( peut produire '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);

TEST 2 ( affichera toujours 'x 1' ):

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

Cette fonction est exécutée avec timeout 0 - elle simulera une tâche asynchrone

Voici une fonction qui prend une autre fonction et génère une version qui s'exécute de manière asynchrone.

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

Il est utilisé comme un moyen simple de créer une fonction asynchrone:

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

C'est différent de la réponse de @ fider parce que la fonction elle-même a sa propre structure (aucun rappel ajouté, elle est déjà dans la fonction) et aussi parce qu'elle crée une nouvelle fonction qui peut être utilisée.

Edit: J'ai totalement mal compris la question. Dans le navigateur, j'utiliserais setTimeout. S'il était important qu'il s'exécute dans un autre thread, j'utiliserais Web Workers .

En retard, mais pour montrer une solution facile à utiliser promisesaprès leur introduction dans ES6 , il gère beaucoup plus facilement les appels asynchrones:

Vous définissez le code asynchrone dans une nouvelle promesse:

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

Remarque à définir resolve()lorsque l'appel asynchrone se termine.
Ensuite, vous ajoutez le code que vous souhaitez exécuter après la fin de l'appel async à l'intérieur .then()de la promesse:

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

En voici un extrait:

$('#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

Cette page vous guide à travers les bases de la création d'une fonction javascript asynchrone.

Depuis ES2017, les fonctions javacript asynchrones sont beaucoup plus faciles à écrire. Vous devriez également en savoir plus sur les promesses .

Si vous souhaitez utiliser des paramètres et réguler le nombre maximum de fonctions asynchrones, vous pouvez utiliser un simple worker async que j'ai construit:

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

Vous pouvez l'utiliser comme ceci:

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

Bien que n'étant pas fondamentalement différente des autres solutions, je pense que ma solution fait quelques bonnes choses supplémentaires:

• il permet de paramétrer les fonctions
• il passe la sortie de la fonction au callback
• il est ajouté pour Function.prototypepermettre une meilleure façon de l'appeler

De plus, la similitude avec la fonction intégrée Function.prototype.applyme semble appropriée.

À côté de la bonne réponse de @pimvdb, et juste au cas où vous vous le demanderiez, async.js n'offre pas non plus de fonctions vraiment asynchrones. Voici une version (très) dépouillée de la méthode principale de la bibliothèque:

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

Ainsi, la fonction protège des erreurs et la transmet gracieusement au rappel à gérer, mais le code est aussi synchrone que toute autre fonction JS.

Malheureusement, JavaScript ne fournit pas de fonctionnalité asynchrone. Cela ne fonctionne que dans un seul thread. Mais la plupart des navigateurs modernes fournissent des Workers , qui sont des seconds scripts qui sont exécutés en arrière-plan et peuvent renvoyer un résultat. Donc, j'ai atteint une solution, je pense qu'il est utile d'exécuter une fonction de manière asynchrone, ce qui crée un worker pour chaque appel asynchrone.

Le code ci-dessous contient la fonction async à appeler en arrière-plan.

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

Voici un exemple d'utilisation:

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

Cela exécute une fonction qui itère un foravec un nombre énorme pour prendre du temps comme démonstration d'asynchronicité, puis obtient le double du nombre passé. La asyncméthode fournit un functionqui appelle la fonction souhaitée en arrière-plan, et dans ce qui est fourni comme paramètre de asynccallback, le returndans son paramètre unique. Donc, dans la fonction de rappel, j'ai alertle résultat.

MDN a un bon exemple sur l'utilisation de setTimeout en préservant "this".

Comme le suivant:

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

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