例如 通过学生获取学生所在学校信息,需要先查询学生所在班级,再通过班级查询所在学校信息。js代码类似写法如下:

function getStudentSchool(id) {
ajax.get("/Test/GetStudent", { "studentId": id }, function (student) {
if (student != null && student.ClassId != null) {
ajax.get("/Test/GetClass", { "classId": student.ClassId }, function (studentClass) {
if (studentClass != null && studentClass.SchoolId != null) {
ajax.get("/Test/GetSchool", { "schoolId": studentClass.SchoolId }, function (school) {
if (school != null) {
console.log(school);
}
});
}
});
}
});
} //调用入口方法
window.οnlοad= function(){
getStudentSchool(1);
};

  写了个类通过设置相关业务信号量来绑定触发的方法,当信号变量改变时就会自动调用相应的方法,改进方法如下:

function AsynFlag() {
if (typeof this.setFlag != "function") {
AsynFlag.prototype.setFlag = function (obj, name, fun) {
if (obj.hasOwnProperty(name)) {
obj[name + "_fun"] = fun;
return;
}
obj[name] = 0;
obj[name + "_"] = 0;
Object.defineProperty(obj, name, {
get: function () {
return obj[name + "_"];
},
set: function (value) {
if (value != obj[name + "_"]) {
obj[name + "_"] = value;
}
else
{
return;
}
if (obj[name + "_fun"] == null) {
obj[name + "_fun"] = fun;
}
obj[name + "_fun"]();
}
});
};
}
} var param = { "studentId": 0, "classId": 0, "schoolId": 0 };
var s = new AsynFlag();
var flag = {}; function getStudent()
{
ajax.get("/Test/GetStudent", { "studentId": param.studentId }, function (student) {
if (student != null && student.ClassId != null) {
param.classId = student.ClassId;
s.setFlag(flag, "canGetClass", getClass);
flag.canGetClass = true;
}
});
} function getClass()
{
ajax.get("/Test/GetClass", { "classId": param.ClassId }, function (studentClass) {
if (studentClass != null && studentClass.SchoolId != null) {
param.SchoolId = studentClass.SchoolId;
s.setFlag(flag, "canGetSchool", getSchool);
flag.canGetSchool = true;
}
});
} function getSchool()
{
ajax.get("/Test/GetSchool", { "schoolId": param.SchoolId }, function (school) {
if (school != null) {
console.log(school);
}
});
}
//调用入口方法
window.onload= function(){
param.studentId =1;
getStudent();
};

flag 是个信号量设置对象,s.setFlag(flag, "canGetClass", getClass); 设置flag拥有canGetClass属性,并且该属性绑定函数getClass,  当第一个ajax获得数据后设置信号并改变信号量触发绑定的getClass函数,flag对象中会自动创建canGetClass,

canGetClass_, 两个属性和一个canGetClass_fun方法来实现当canGetClass改变时调用canGetClass_fun=getClass。

以上代码实际测试可行。

代码已上传github https://github.com/SaFaJim/AsynFlag
————————————————
版权声明:本文为CSDN博主「皮皮虾大侠」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Asa_Jim/article/details/86648199

js 回调地狱的另类解决方案尝试的更多相关文章

  1. JavaScript异步编程__“回调地狱”的一些解决方案

    异步编程在JavaScript中非常重要.过多的异步编程也带了回调嵌套的问题,本文会提供一些解决“回调地狱”的方法. setTimeout(function () { console.log('延时触 ...

  2. javascript回调地狱真的只能Promise来解决吗?js回调地狱,Promise。

    javascript的灵活在于函数可以当作函数的参数来传递,以及它的异步回调思想.但是这就带了一个很严重的问题,那就是回调次数过多,会影响代码结构,多层嵌套影响代码的可阅读性,也不便于书写. 举个例子 ...

  3. JS回调函数(深入篇)

    <有些错别字> 在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中 ...

  4. JS回调函数深入篇

    <有些错别字> 在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中 ...

  5. 【JavaScript】 使用Async 和 Promise 完美解决回调地狱

    很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...

  6. 避免Node.js中回调地狱

    为了解决这个阻塞问题,JavaScript严重依赖于回调,这是在长时间运行的进程(IO,定时器等)完成后运行的函数,因此允许代码执行经过长时间运行的任务. downloadFile('example. ...

  7. js中的回调地狱 Callback to Hell

        本文重点:解决方式:1.promise  2. 拆解 function:将各步拆解为单个的 function  3. 通过 Generator 函数暂停执行的效果方式 4. 通过ES8的异步函 ...

  8. js中的回调函数 和promise解决异步操作中的回调地狱问题。

    回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...

  9. js动画实现&&回调地狱&&promise

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 翻转二叉树(深搜-先序遍历-交换Node)

    题目:翻转二叉树,例如 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 已知二叉树的节点定义如下: class TreeNode { in ...

  2. Gradle+Groovy基础篇

    在Java项目中,有两个主要的构建系统:Gradle和Maven.构建系统主要管理潜在的复杂依赖关系并正确编译项目.还可以将已编译的项目以及所有资源和源文件打包到.war或.jar文件中.对于简单的构 ...

  3. DRF Django REST framework 之 视图组件(四)

    引言 在我们有几十上百的视图类,都有get,post等方法,在功能类似时,会导致大量的重复代码出现,显然还有很多可以优化的地方.这也就有了视图组件,它的功能非常强大,能很好的优化接口逻辑. 视图组件 ...

  4. iOS和webppy图片的爱恨情仇

    如果iOS是个好哥哥,webppy一定是一个持家能干的漂亮姑娘

  5. 这3步简单搭建Python http服务器 你肯定不会吧?

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:stark张宇 趁着周末的闲暇时光看看Python是什么鬼 给疲倦的 ...

  6. Java关于赋值

    下面的程序有问题吗?如果有问题说明一下, 如果没有问题猜测一下运行结果: public static void main(String[] args){ short s = 1; s=s+1; Sys ...

  7. Node.js:深入浅出 http 与 stream

    原文链接:https://github.com/iNuanfeng/blog/issues/4 作者:暖风叔叔 前言 stream(流)是Node.js提供的又一个仅在服务区端可用的模块,流是一种抽象 ...

  8. 你不知道的JavaScript(上)this和对象原型(四)原型

    五章 原型 1.[[ Prototype ]] JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用.几乎所有的对象在创建时 [[Prototy ...

  9. C++程序设计实验考试准备资料(2019级秋学期)

    程序设计实验考试准备资料 ——傲珂 #include<bits/stdc++.h> C++常用函数: <math.h>头文件 floor() 函数原型:double floor ...

  10. [ASP.NET Core 3框架揭秘] 依赖注入[8]:服务实例的生命周期

    生命周期决定了IServiceProvider对象采用怎样的方式提供和释放服务实例.虽然不同版本的依赖注入框架针对服务实例的生命周期管理采用了不同的实现,但总的来说原理还是类似的.在我们提供的依赖注入 ...