异步顺序调用方法

2024-04-07

我有一个在方法中调用的方法列表,如下所示:

this.doOneThing();
someOtherObject.doASecondThing();
this.doSomethingElse();

当这是同步时,它们会一个接一个地执行,这是必需的。但现在我有 someOtherObject.doASecondThing() 作为异步,我也可能将 doOneThing 变成异步。我可以使用回调并从回调内部调用 that.doSomethingElse:

var that = this;
this.doOneThing( function () { 
                    someOtherObject.doASecondThing(function () {
                        that.doSomethingElse();
                    });
                  });

但是,由于序列不断增长,回调相互调用似乎有点混乱,由于某种原因,它使序列看起来不像以前那么明显,并且缩进可能会随着序列中调用的方法数量而增长。

有没有办法让这个看起来更好?我也可以使用观察者模式,但在我看来,它也不会让事情变得非常明显。

Thanks,


延续,以及为什么它们会导致回调意大利面

在回调中编写会迫使您有时采用类似于“连续传递风格”(CPS)的方式进行编写,这是一种非常强大但困难的技术。它代表了控制的完全反转,实际上是“颠倒”了计算。 CPS 使代码的结构明确地反映程序的控制流(有时是好事,有时是坏事)。实际上,您显式地写下了匿名函数的堆栈。

作为理解此答案的先决条件,您可能会发现这很有用:

http://matt.might.net/articles/by-example-continuation-passing-style/ http://matt.might.net/articles/by-example-continuation-passing-style/

例如,这就是您正在做的事情:

function thrice(x, ret) {
    ret(x*3)
}
function twice(y, ret) {
    ret(y*2)
}
function plus(x,y, ret) {
    ret(x+y)
}

function threeXPlusTwoY(x,y, ret) {
    // STEP#1
    thrice(x,                 // Take the result of thrice(x)...
        function(r1) {        // ...and call that r1.
            // STEP#2
            twice(y,            // Take the result of twice(y)...
                function(r2) {  // ...and call that r2.
                    // STEP#3
                    plus(r1,r2,   // Take r1+r2...
                        ret       // ...then do what we were going to do.
                    )
                }
            )
        }
    )
}

threeXPlusTwoY(5,1, alert);  //17

正如您所抱怨的,这会导致代码相当缩进,因为闭包是捕获此堆栈的自然方法。


Monad 来救援

取消缩进 CPS 的一种方法是像 Haskell 中那样“单子”编写。我们该怎么做呢?在 javascript 中实现 monad 的一种好方法是使用点链表示法,类似于 jQuery。 (看http://importantshock.wordpress.com/2009/01/18/jquery-is-a-monad/ http://importantshock.wordpress.com/2009/01/18/jquery-is-a-monad/一个有趣的消遣。)或者我们可以使用反射。

但首先我们需要一种方法来“写下管道”,然后我们可以找到一种方法将其抽象出来。不幸的是,用 javascript 编写通用的 monad 语法有点困难,所以我将使用列表来表示计算。

 

// switching this up a bit:
// it's now 3x+2x so we have a diamond-shaped dependency graph

// OUR NEW CODE
var _x = 0;
var steps = [
    [0,  function(ret){ret(5)},[]],  //step0:
    [1,  thrice,[_x]],               //step1: thrice(x)
    [2,  twice,[_x]],                //step2: twice(x)
    [3,  plus,[1, 2]]                //step3: steps[1]+steps[2] *
]
threeXPlusTwoX = generateComputation(steps);

//*this may be left ambiguous, but in this case we will choose steps1 then step2
// via the order in the array

这有点难看。但我们可以使这个未缩进的“代码”起作用。我们可以稍后再考虑让它变得更漂亮(在最后一节)。在这里我们的目的是写下所有“必要的信息”。我们想要一种简单的方法来编写每一“行”,以及我们可以编写它们的上下文。

现在我们实现一个generateComputation它会生成一些嵌套的匿名函数,如果我们执行它,这些函数将按顺序执行上述步骤。这是这样的实现:

function generateComputation(steps) {
    /*
    * Convert {{steps}} object into a function(ret), 
    * which when called will perform the steps in order.
    * This function will call ret(_) on the results of the last step.
    */
    function computation(ret) {
        var stepResults = [];

        var nestedFunctions = steps.reduceRight(
            function(laterFuture, step) {
                var i            = step[0];  // e.g. step #3
                var stepFunction = step[1];  // e.g. func: plus
                var stepArgs     = step[2];  // e.g. args: 1,2

                console.log(i, laterFuture);
                return function(returned) {
                    if (i>0)
                        stepResults.push(returned);
                    var evalledStepArgs = stepArgs.map(function(s){return stepResults[s]});
                    console.log({i:i, returned:returned, stepResults:stepResults, evalledStepArgs:evalledStepArgs, stepFunction:stepFunction});
                    stepFunction.apply(this, evalledStepArgs.concat(laterFuture));
                }
            },
            ret
        );

        nestedFunctions();
    }
    return computation;
}

示范:

threeXPlusTwoX = generateComputation(steps)(alert);  // alerts 25

边注:reduceRight语义意味着右侧的步骤将更深入地嵌套在函数中(将来会更深入)。供不熟悉的人参考,[1,2,3].reduce(f(_,_), x) --> f(f(f(0,1), 2), 3), and reduceRight(由于设计考虑不佳)实际上相当于[1.2.3].reversed().reduce(...)

Above, generateComputation制作了一堆嵌套函数,在准备过程中将它们彼此包装在一起,并在使用时进行评估...(alert),将它们一一剥开,输入到计算中。

旁注:我们必须使用 hack,因为在前面的示例中,我们使用闭包和变量名来实现 CPS。 Javascript 不允许足够的反射来做到这一点,而不求助于制作字符串和eval所以我们暂时避开函数式风格,选择改变一个跟踪所有参数的对象。因此,上面的内容更接近地复制了以下内容:

var x = 5;
function _x(ret) {
    ret(x);
}

function thrice(x, ret) {
    ret(x*3)
}
function twice(y, ret) {
    ret(y*2)
}
function plus(x,y, ret) {
    ret(x+y)
}

function threeXPlusTwoY(x,y, ret) {
    results = []
    _x(
        return function(x) {
            results[0] = x;

            thrice(x,                 // Take the result of thrice(x)...
                function(r1) {        // ...and call that r1.
                    results[1] = r1;

                    twice(y,            // Take the result of twice(y)...
                        function(r2) {  // ...and call that r2.
                            results[2] = r2;

                            plus(results[1],results[2],   // Take r1+r2...
                                ret       // ...then do what we were going to do.
                            )
                        }
                    )
                }
            )

        }
    )
}

理想语法

但我们仍然希望以合理的方式编写函数。我们将如何ideally喜欢编写我们的代码来利用 CPS,但同时保持我们的理智?文献中有很多观点(例如,Scala 的shift and reset运算符只是实现此目的的众多方法之一),但为了理智起见,让我们找到一种为常规 CPS 制作语法糖的方法。有一些可能的方法可以做到这一点:

 

// "bad"
var _x = 0;
var steps = [
    [0,  function(ret){ret(5)},[]],  //step0:
    [1,  thrice,[_x]],               //step1: thrice(x)
    [2,  twice,[_x]],                //step2: twice(x)
    [3,  plus,[1, 2]]                //step3: steps[1]+steps[2] *
]
threeXPlusTwoX = generateComputation(steps);

...变成...

  • 如果回调位于一个链中,我们可以轻松地将一个回调传递给下一个回调,而不必担心命名。这些函数只有一个参数:回调参数。 (如果没有,您可以在最后一行对函数进行柯里化,如下所示。)这里我们可以使用 jQuery 风格的点链。

 

// SYNTAX WITH A SIMPLE CHAIN
// ((2*X) + 2)
twiceXPlusTwo = callbackChain()
    .then(prompt)
    .then(twice)
    .then(function(returned){return plus(returned,2)});  //curried

twiceXPlusTwo(alert);
  • 如果回调形成依赖树,我们也可以摆脱 jQuery 风格的点链,但这将违背为 CPS 创建单子语法的目的,即扁平化嵌套函数。因此我们在这里不做详细介绍。

  • 如果回调形成依赖非循环图(例如,2*x+3*x,其中 x 使用了两次)我们需要一种方法命名中间结果一些回调。这就是有趣的地方。我们的目标是尝试模仿语法http://en.wikibooks.org/wiki/Haskell/Continuation_passing_style http://en.wikibooks.org/wiki/Haskell/Continuation_passing_style以其do-将函数“展开”和“重新包装”进出 CPS 的符号。不幸的是[1, thrice,[_x]]语法是我们可以轻松达到的最接近的语法(甚至不是很接近)。您可以用另一种语言进行编码并编译为 JavaScript,或者使用 eval(对不祥的音乐进行排队)。有点矫枉过正了。替代方案必须使用字符串,例如:

 

// SUPER-NICE SYNTAX
// (3X + 2X)
thriceXPlusTwiceX = CPS({
    leftPart: thrice('x'),
    rightPart: twice('x'),
    result: plus('leftPart', 'rightPart')
})

您只需对generateComputation我描述了。首先,您将其调整为使用逻辑名称('leftPart'等)而不是数字。然后你让你的函数实际上是惰性对象,其行为如下:

thrice(x).toListForm() == [<real thrice function>, ['x']]
or
thrice(x).toCPS()(5, alert)  // alerts 15
or
thrice.toNonCPS()(5) == 15

(您可以使用某种装饰器以自动方式完成此操作,而不是手动完成。)

旁注:所有回调函数都应遵循有关回调参数位置的相同协议。例如,如果您的函数以myFunction(callback, arg0, arg1, ...) or myFunction(arg0, arg1, ..., callback)它们可能不太兼容,但如果它们不兼容,您可能可以执行 javascript 反射 hack 来查看函数的源代码并将其正则表达式出来,因此不必担心它。

为什么要经历这么多麻烦?这可以让你混入setTimeouts and prompts 和 ajax 请求,而不会遭受“缩进地狱”的困扰。您还可以获得一大堆其他好处(例如能够编写 10 行非确定性搜索数独求解器,以及实现任意控制流运算符),我在此不再赘述。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

异步顺序调用方法 的相关文章

  • 按键对 JavaScript 对象进行排序

    我需要按键对 JavaScript 对象进行排序 因此 以下内容 b asdsad c masdas a dsfdsfsdf 会成为 a dsfdsfsdf b asdsad c masdas 这个问题的其他答案已经过时 与实施现实不符 并
  • Crypto-Js 库的 hmac-256 脚本返回函数结构而不是 Google Apps 脚本中的值,在外部工作正常吗?

    我正在设置一个谷歌电子表格项目来连接到我的 CryptoExchange API 但是当涉及到这个简单的 CryptoJs Hmac sha256 脚本时 它不起作用 它返回函数结构而不是值 而在外部它工作正常 看我的jsfiddle ht
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • window.open:是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle
  • 游戏手柄 JavaScript 未能按预期更新

    我正在尝试让浏览器报告我的 XBOX 控制器的状态 然而 在第一次按下按钮后 它似乎变得 卡住 我究竟做错了什么
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • 将 JSON 参数从 java 发布到 sinatra 服务

    我有一个 Android 应用程序发布到我的 sinatra 服务 早些时候 我无法读取 sinatra 服务上的参数 但是 在我将内容类型设置为 x www form urlencoded 之后 我能够看到参数 但不完全是我想要的 我在
  • 使用 Newtonsoft.Json.NET 搜索 JSON 根对象的正确 JsonPath 表达式是什么?

    大多数例子涉及Stefan G ssner 的书店示例 http goessner net articles JsonPath index html e3 但是我正在努力为简单对象 无数组 定义正确的 JsonPath 表达式 Id 1 N
  • 具有固定顶部菜单的语义 UI 侧边栏

    Semantic UI 对其进行预警侧边栏页面 http semantic ui com modules sidebar html usage 当侧边栏出现时 固定位置内容可能会出现改变其位置的问题 然后它提供了该问题的两种可能的解决方案
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我

随机推荐

  • Wicket 重定向:如何传递参数并保持 URL“漂亮”?

    考虑一个重定向到另一个页面的 Wicket 网页 基于此处省略的一些逻辑 public class SomePage extends WebPage public SomePage PageParameters parameters set
  • Python ElementTree find() 在 kml 文件中不匹配

    我正在尝试使用元素树从 kml 文件中查找元素 如下所示 from xml etree ElementTree import ElementTree tree ElementTree tree parse history 03 02 201
  • 为什么在构建视图时要指定数据上下文类?

    当使用下图所示的 添加视图 对话框向 ASP NET MVC 5 项目添加新视图时 我被邀请选择一个模板和一个模型类 这使我能够快速生成一个表单来创建模型的新实例或显示模型属性的视图 但是视图为什么要关心数据上下文类是什么 在我的项目中 无
  • 在 ActionCable 中未找到订阅类“MyChannel”

    我在使用 Action Cable 时遇到问题 每当我运行程序时 我都会收到一条错误消息 Subscription找不到类ConversationChannel 当我尝试发送消息时 我收到此日志 成功升级到WebSocket REQUEST
  • 二维码回车

    如何在 QR 条形码中编码回车符 例如 如果我用 Android 扫描它 它就会出现 A B C 我努力了A d013B d013C等等 但它总是显示转义字符 在我发现的其他方法中 这些方法似乎都不起作用 您只需将正确的字节序列放入 QR
  • 正则表达式中的负向前瞻以排除 R 中的百分比 (%)

    我希望提取具有任意小数的数字 小数点两边至少各有一个数字 但是not模式后跟百分比 因此 我相信我需要一个负前瞻 这样它就可以看到数字后面是否有百分号 为了清楚起见 我想提取 123 123 但不想提取 123 123 我尝试了十几种语法安
  • 如何在tcl中搜索数字即进程ID并杀死进程ID

    我尝试搜索存储在变量 say 缓冲区中的进程 id i e 6762 nohup tcpdump ni eth0 s0 2 gt 1 null 1 6762 You have new mail in var mail root 如果匹配的话
  • 参数类型“对象?”无法分配给参数类型“Map

    我在以下行 var map Map from snap snapshot value 中的 snap snapshot value 参数上出现错误 错误是 参数类型 对象 无法分配给参数类型 Map class HomePageState
  • 用于调整图像大小和创建缩略图的 ImageMagick 或 GD 库?

    我一直在使用其他人编写的图像调整大小类来调整图像大小或创建缩略图 这是我一直在使用的类的链接 http www white hat web design co uk articles php image resizing php http
  • 使用用户窗体中的数据将值从一张纸复制到另一张纸

    我有一个用户表单 其中包含您可以填写的以下值 TextBoxLopnummer Value TextBoxFragestallare Value TextBoxMottagare Value TextBoxDatum Value Pictu
  • 在 do while 循环内检查多个 checkbox.checked 状态

    我在上一个问题中问过如何 线程化 2 个表单以同时使用 C https stackoverflow com questions 40450905 threading 2 forms to use simultaneously c sharp
  • -1 是一个神奇的数字吗?反模式?代码味道?当局的引述和指南[重复]

    这个问题在这里已经有答案了 可能的重复 不断的虐待 https stackoverflow com questions 1862593 constant abuse 我见过 1用于各种 API 最常用于搜索具有从零开始的索引的 集合 时 通
  • 从 Rails 3 升级后不允许使用 Rails 4 方法

    我有一个现有的代码库 我正在尝试将其从 Rails 3 2 升级到 Rails 4 0 我有一个名为 asset controller 的控制器 带有 create 方法 并且我的路由文件中有一个条目 resources assets 在前
  • 如何创建一个接受任何类型变量的 Java 函数?

    我想创建一个可以接受任何传入变量的函数 无论类型如何 int double String或其他对象 然后可能确定变量的类型并对该类型进行有条件的操作 我怎样才能做到这一点 重载是最推荐的选项 大多数时候您不需要接受任何类型变量的函数 但是如
  • 为什么ssd和yolo没有roi池化层?

    我们知道目标检测框架像faster rcnn and mask rcnn has an roi pooling layer or roi align layer 但是为什么ssd和yolo框架没有这样的层呢 首先我们要明白这样做的目的是什么
  • @font-face 和 .ttf 文件出现问题

    我正在尝试使用 font face 来实现我在线下载的字体 http www losttype com font name blanch http www losttype com font name blanch 并且我在让它在任何浏览器
  • 保存 ember 数据模型后的转换

    我想在创建帖子后进行转换 post new gt 单击提交 gt Rails 后端成功创建帖子并响应 json gt 重定向到新创建帖子的路径 在 ember data example github 源代码中 他们使用这种方法 transi
  • Grails JSONBuilder

    如果我有一个简单的对象 例如 class Person String name Integer age 我可以使用 JSONBuilder 轻松地将其用户定义的属性呈现为 JSON def person new Person name bo
  • Rails 在模型中验证值在数组内

    我有一个表格 我可以在其中传递一个字段命名 type我想要检查它的值是否在允许类型的数组内以便任何人不得发布不允许的类型 数组看起来像 allowed types type1 type2 type3 type4 type5 type6 ty
  • 异步顺序调用方法

    我有一个在方法中调用的方法列表 如下所示 this doOneThing someOtherObject doASecondThing this doSomethingElse 当这是同步时 它们会一个接一个地执行 这是必需的 但现在我有