Maison > interface Web > js tutoriel > le corps du texte

Un exemple de discussion sur la question de l'exécution et de la séquence de retour de plusieurs requêtes Ajax

韦小宝
Libérer: 2017-12-31 10:15:11
original
1752 Les gens l'ont consulté

Cet article aborde principalement avec vous la question de l'ordre d'exécution et de retour des multiples requêtes Ajax Les amis intéressés par ajax peuvent se référer à l'article sur plusieurs Ajax Article de discussion sur un exemple de séquence de retour d'exécution de demande

Parfois, dans un processus de

traitement d'événements d'entreprise, vous pouvez rencontrer un clic sur un bouton ou d'autres événements déclenchant une action
Vous devez exécuter plus de deux requêtes Ajax, mais vous devrez peut-être vous soucier de l'ordre dans lequel les requêtes Ajax sont exécutées. Parfois, il y a un problème avec l'ordre des requêtes Ajax, ce qui entraînera divers problèmes
<.>Par exemple, il existe deux événements ajax, respectivement ajax1, ajax2

Une méthode appelée main appelle l'entrée d'exécution

1.



function main(){
ajax1(data,callback);
ajax2(data,callback);
}
Copier après la connexion


Si nous suivons la méthode ci-dessus pour exécuter, il semble que ajax1 soit exécuté en premier et ajax2 soit exécuté plus tard. Si vous n'y réfléchissez pas bien, certaines personnes penseront que ajax1 est exécuté en premier, puis ajax2 est exécuté. Est-ce vraiment le cas ?

La réponse n'est pas nécessairement. Bien sûr, pour les situations où il existe plusieurs requêtes ajax qui ne nécessitent pas l'ordre d'exécution et de retour, nous n'avons pas besoin de trop réfléchir à qui exécute en premier et qui revient en premier
Et si nous considérions l'ordre d'exécution et retour des événements ajax

Si tel est le cas, comment résoudre l'ordre de retour d'exécution des événements ajax

Bien sûr, maintenant vous devriez penser à ajax
fonction de rappel
, Bien , c'est une bonne idéeMaintenant, appuyez sur ce bouton. Changez votre façon de penser et votre approche comme suit



function main(){
ajax1( data , ajax2( ) );
}
Copier après la connexion


Vous ressemblez à ça, vous ne trouvez pas un très bon drap en laine ? Vraiment? Est-ce vraiment très bon ?

Peut-être, mais dans certains cas, cela peut être gênant d'écrire ainsi. Bien sûr, vous ne le rencontrerez peut-être pas, mais j'ai rencontré une situation assez particulière
Par exemple, la possibilité suivante
.



function main(){
aa(data);
ajax1(data,callback);
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的
ajax2(data,ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback()执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}
Copier après la connexion


Pensez-vous que cette situation peut satisfaire ajax2 pour qu'il soit exécuté en premier et terminé en premier dans ajax1

Réfléchissez bien et vous trouverez la réponse

Non !
Maintenant, comment résoudre ce problème. Comment s'assurer qu'ajax2 est terminé avant ajax1.

Bien sûr, me direz-vous, ce n'est pas simple, mettez l'appel d'ajax1 à la fin de la méthode ajax2. méthode de rappel ajax2Callback Face

Je dois admettre que c'est une solution, mais si c'est un projet très ancien, c'est un projet depuis plusieurs années. Les appels à l'intérieur sont compliqués, vous devriez donc essayer d'éviter de modifier les méthodes sous-jacentes précédentes. Peut-être souhaitez-vous simplement corriger ce bug et simplement le résoudre. Vous pouvez créer à nouveau plusieurs bugs.

Existe-t-il un bon moyen ? Aller le résoudre ?

Bien sûr, résolvez-le facilement. Mais les personnes ayant peu d'expérience professionnelle y pensent rarement d'un coup et n'utiliseront que les méthodes précédentes pour résoudre le problème à la hâte, quoi qu'il arrive.

Et j'ai adopté une méthode relativement stupide, et il y a encore quelques problèmes. J'ai utilisé setTimeOut
timer
pour l'exécuter une fois, mais tout le monde doit connaître le problème. exécuté ? Cela fait combien de temps ? Heureusement, un maître m'a guidé Vous souvenez-vous encore de trier le En parlant de ça, vous êtes peut-être curieux de savoir ce que cela a à voir avec le tableau ? tri. La réponse sera donnée ci-dessous
Le code explique tout :



function main(){
var temp=ajax2Callback;
ajax2Callback=function(){
temp();
ajax1(data,callback);
}
aa(data);
ajax2Callback=temp; 
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的
ajax2(data,ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback()执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}
Copier après la connexion

Voir, oui N'est-ce pas très intéressant ? La méthode du niveau le plus bas n'est pas modifiée, seule la méthode principale est modifiée. N'est-ce pas très similaire au tri par tableau quand on compare la taille de deux valeurs, que l'on utilise le
tri à bulles ?

ou tri rapide, une variable temporaire est-elle définie pour stocker la valeur ? Bien sûr, lors du tri et de la comparaison des tailles, vous n'avez pas besoin de configurer des variables temporaires, utilisez simplement un ^

opérateur pour attribuer la taille, ou vous pouvez même être assez paresseux pour appeler directement les tableaux du système. méthode sort(). Bien sûr, tout cela peut être fait
Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à tout le monde ! !

function changeSearchContactType(obj)
{
if (!obj)
{
return;
}

var contactType = obj.value;

var origRenderTemplate = renderTemplate;
renderTemplate = function(data)
{
origRenderTemplate(data);
ajaxAnywhere.submitAJAX(&#39;setSearchContactType&#39;);
}
var result = TemplateHelper.changeSearchContactTemplate(contactType, contactUIUID);
renderTemplate = origRenderTemplate;
return result;
}
Copier après la connexion

Recommandations associées :

AJax implémente des fonctions similaires à la barre de recherche Baidu

Compréhension approfondie du ajax series No. 1 Chapter XHR Object

Format de stockage de données JSON pour l'interaction Ajax avec les utilisateurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!