Puis-je faire plus pour que javascript fasse deux choses à la fois?

J’ai un besoin étrange. Je voudrais faire les choses suivantes en javascript:

  1. quand une fonction est appelée, je souhaite changer la couleur d’un DIV, puis 1/2 seconde plus tard, je souhaite le modifier
  2. en même temps que (1) je voudrais faire un appel Ajax. L’appel prend généralement une seconde

En d’autres termes, j’aimerais que les étapes 1 et 2 commencent en même temps.

Ma connaissance de javascript est assez basique. Est-ce que ce genre de chose est possible? Et si j’utilisais jQuery, est-ce que cela faciliterait les choses?

Vous pouvez utiliser jQuery et sa queue fonctions pour retarder une action.

J’ai créé la version de wdm sur jsFiddle, pour la changer en style de queue d’ queue , au lieu de setTimeout . À mon avis, il s’agit d’un moyen beaucoup plus propre et plus efficace de réaliser ce que vous recherchez.

Voici la démo forkée

Voici le code JavaScript:

 $('#change').click(function(e) { e.preventDefault(); $('#a') .css('background-color', 'blue') .delay(500) .queue(function(next){ $(this).css('background-color', 'red'); next(); }); $.ajax({}); // do the ajax call here }); 

J’ai créé la première partie pour vous. Il définit la couleur en bleu, puis en rouge une demi-seconde plus tard (500 ms).

Vous pouvez ensuite append le code de la demande ajax où j’ai le commentaire. Le changement de couleur et l’appel ajax commenceront en même temps que la fonction est appelée.

Démo: http://jsfiddle.net/wdm954/H39XZ/1/

 $('#change').click(function(e) { e.preventDefault(); $('#a').css('background-color', 'blue'); setTimeout(function() { $('#a').css('background-color', 'red'); }, 500); // Insert ajax call here }); 

Un concept important est que javascript est une opération mono-thread. Une seule chose arrive vraiment, pas de tâches parallèles.

Voici un bon tutoriel pour obtenir ce point dans les détails.

Cela ne signifie pas pour autant que l’exécution de javascript semble ne comporter qu’un seul thread pour l’utilisateur final. Vous disposez de nombreux outils avec des appels ajax asynchrones et des événements basés sur une timer (tels que les files d’attente jQuery utilisées dans les tâches d’animation) qui feront interagir les travaux javascript. Cela signifie que des tâches seront effectuées étape par étape, et pour plusieurs zones graphiques, de sorte que vous obtiendrez l’impression finale qu’elles sont effectuées en parallèle.

C’est pourquoi @Shef répond, ainsi que @ anirudh4444.

AJAX a pour objective même de faire des appels asynchrones. Vous pouvez exécuter une fonction à l’aide des setTimeout() et setInterval() si vous souhaitez qu’elles s’exécutent ultérieurement.