如何在JavaScript(jquery)中确保按顺序依次执行某些操作。

说,我需要在加载teachers之前先加载schools集合,以便myTeacher.SchoolName = schools[myTeacher.SchoolId].name;

伪代码如下:

const studentsUrl='api/students', teachersUrl='api/teachers', schoolsUrl='api/schools';
let students = null, teachers = null, schools = null;

$(document).ready(function () {
    getSchools(); 
    getTeachers(); 
    getStudents(); 
});

function getSchools() {
    $.get(schoolsUrl, function (data) {
            window.schools = data;
        });
}

function getTeachers() {
    $.get(teachersUrl, function (data) {
            window.teachers = data;

            // >>> SHOULD BE SURE, SCHOOLS already loaded!!!
            $.each(teachers, function (key, item) {
                item.school = schools[item.schoolId].name;
            });
        });
}

function getStudents() {
    $.get(studentsUrl, function (data) {
            window.students = data;

            // >>> SHOULD BE SURE, TEACEHRS already loaded!!!
            $.each(students, function (key, item) {
                item.teacher = teachers[item.teacherId].name;
            });
        });
}

PS。

还有另一种方法来确保顺序,但在另一个函数的末尾封装一个函数吗?

#1楼 票数:1

由于您只需要所有可用的结果,并且每个请求都不依赖于先前的请求,因此可以使用jQuery.when

let students = null;
let teachers = null;
let schools = null;

$(document).ready(function() {
  $.when(
      getSchools(),
      getTeachers()
  ).done(function(shoolResults, teacherResults) {
      window.schools = shoolResults;
      window.teachers = teacherResults;
      handleTeachers();
      getStudents();
  });


  function getSchools() {
    return $.ajax({
      type: 'GET',
      url: schoolsUrl
    });
  }

  function getTeachers() {
    return $.ajax({
      type: 'GET',
      url: teachersUrl
    });
  }

  function handleTeachers() {
   $.each(teachers, function (key, item) { 
     item.school = schools[item.schoolId].name;
    });
  }
});

#2楼 票数:1

正如其他人已经建议的那样,您可以链接请求。 我对您的代码进行了一些更改。

  1. 添加了严格模式 ,有助于防止错误
  2. IFFE中包装了该代码,以防止全球污染

如果所有api都属于同一服务器,则可以在服务器端处理所有这些数据并返回一个已填充的json。 这样,您的服务器将在构造此json上做一些额外的工作,但另一方面,您将只发出一个ajax请求而不是3。这将更快地工作,并且可以将json缓存一段时间

第一个解决方案的代码

(function () {

'use strict';
const studentsUrl = 'api/students';
const teachersUrl = 'api/teachers';
const schoolsUrl = 'api/schools';

let students = null;
let teachers = null;
let schools = null;

var scoolData = {
    schools: null,
    teachers: null,
    students: null
};

$(document).ready(function () {
    getSchools().then(function (schools) {
        scoolData.schools = schools;
        getTeachers().then(function (teachers) {
            scoolData.teachers = teachers;
            $.each(scoolData.teachers, function (key, item) {
                item.school = scoolData.schools[item.schoolId].name;
            });
        });
    });
});

function getSchools() {
    return $.get(schoolsUrl);
}

function getTeachers() {
    return $.get(teachersUrl,
        function (result) {
            scoolData.teachers = result;

            // >>> SHOULD BE SURE, SCHOOLS already loaded!!!
            $.each(teachers, function (key, item) {
                item.school = scoolData.schools[item.schoolId].name;
            });
        });
}
})();

#3楼 票数:1

如果您希望他们按顺序排列(尽管我不确定我为什么会这样,因为您无论如何都会检索所有的学校/老师/学生),只需执行此操作即可。

注意 :在以下示例中, get*函数是虚拟变量。 相反,只需返回来自它们的$.get调用的结果:

 function getSchools() { return Promise.resolve({1: {name: 'school1'}}); } function getTeachers() { return Promise.resolve({1: {name: 'teacher1', schoolId: 1}}); } function getStudents() { return Promise.resolve({1: {name: 'student1', teacherId: 1}}); } (async () => { const schools = await getSchools(); const teachers = await getTeachers(); const students = await getStudents(); // Alternative for the $.each code Object.values(teachers).forEach(teacher => teacher.school = schools[teacher.schoolId].name); Object.values(students).forEach(student => student.teacher = teachers[student.teacherId].name); console.log(schools, teachers, students); })(); 

另一个注意事项:这是ES8代码,如果您需要支持较旧的浏览器并且不能使用像Babel这样的编译器,我将发布一个非异步/等待版本。

不依赖于ES8的代码

 function getSchools() { return Promise.resolve({1: {name: 'school1'}}); } function getTeachers() { return Promise.resolve({1: {name: 'teacher1', schoolId: 1}}); } function getStudents() { return Promise.resolve({1: {name: 'student1', teacherId: 1}}); } let schools = null, teachers = null, students = null; getSchools().then(_schools => { schools = _schools; return getTeachers(); }).then(_teachers => { teachers = _teachers; return getStudents(); }).then(_students => { students = _students; for (var _ in teachers) { teachers[_].school = schools[teachers[_].schoolId].name; } for (var _ in students) { students[_].teacher = teachers[students[_].teacherId].name } console.log(schools, teachers, students); }); 

#4楼 票数:0

调用getTeachers(); getSchools(); 返回成功或完成,成功是首选,因为如果有错误,则运行完整。

#5楼 票数:0

我认为您正在寻找这个。

 getSchools().done(function(data){
      var someId = data.findThatId;
      getTeachers(someId);
 }); 

您将需要从Ajax调用返回的数据获得datadone

#6楼 票数:0

您可以异步加载它们,但必须等到两个调用完成。

为此,请在ajax调用之前添加return并将结果合并到ready函数中(而不是在教师调用的成功处理程序中):

let schoolsPromise = getSchools();
let teachersPromise = getTeachers();
$.when(schoolsPromise, teachersPromise)
  .then((schools, teachers) => {
    $.each(teachers, (key, item) => {
      item.school = schools[item.schoolId].name;
    });
  });

  ask by Serge translate from so

未解决问题?本站智能推荐:

2回复

AJAX加载中的Javascript块

我正在寻找一种在javascript中提出AJAX加载请求的方法,但是在等待AJAX​​加载完成时让javascript代码暂停执行。 换句话说,我正在尝试执行同步 AJAX加载请求(我知道AJAX中的'A'代表异步。我只是希望名称不完全正确。)。 我有的是 我希望请求是同步的,原因
1回复

通过ajax加载JavaScript

我通过ajax请求通过javascript将以下代码加载到网站中: 不幸的是,该代码未执行。 如果我直接通过浏览器使用此代码调用php文件,则一切正常。 我希望问题在于,由于已加载基本页面,因此代码未执行。 有任何提示或想法吗?
2回复

在javascript中加载jQuery / ajax

我正在为我的表单使用ajax,因为我不希望页面在提交后重新加载。 现在一切正常,但唯一的问题是每次单击提交按钮时都会运行ajax脚本。 我想我可以在我的if语句中粘贴ajax,告诉何时运行,何时不运行,但它不起作用..任何人都知道为什么? }
2回复

javascript和ajax加载,然后效果

我有一个JavaScript代码,借此尝试从单独的页面加载列表(使用jQuery的load()函数),将当前列表滑出,将新列表滑入。 现在,在新列表完全加载之后,我不希望旧列表滑动。 任何人都可以告诉我如何实现此目标,而不会像脚本在执行时那样再三思。 谢谢。 编辑 抱
2回复

带有ajax调用顺序的Javascript自动完成

我有像这样的 Javascript 简单的自动完成输入字段: 有时,第一次调用比第二次或第三次调用需要更多时间,并且结果会被覆盖。 如何确保仅显示最近成功调用的结果? 我的意思是,如果我收到来自呼叫 #3 的响应 - 我不再关心呼叫 #1 和 #2 并且不希望它们覆盖呼叫 #3 的结果。
1回复

Javascript函数命令AJAX [复制]

这个问题在这里已有答案: 如何让jQuery执行同步而非异步的Ajax请求? 14个答案 我的问题是pointOnMap()在xmlPreparer()之前运行,尽管顺序。 我认为它与使用AJAX有关。 parseXML创建我需要的对象。 所以当我使用poi
1回复

在加载AJAX之后加载javascript

我有一个woocommerce网站,该网站使用具有AJAX过滤器的灯箱产品。 将鼠标悬停在产品上时,要访问灯箱,将显示一个快速查看按钮。 当我加载AJAX过滤器时,不再可以点击灯箱快速查看按钮。 我需要在加载AJAX之后将代码添加到按钮。 以下是主题使用的功能。
1回复

Ajax用内容加载JavaScript和CSS

我正在使用jquery ajax将当前页面的内容从一个页面加载到div中,类似于gmail在收件箱,垃圾箱等之间切换的方式。我正在使用jQuery的load方法 将需要的内容加载到div中 newpage.html #container还具有关联的javascript和css文件。