如何从 setTimeout 做出承诺

2023-11-30

这不是一个现实世界的问题,我只是想了解如何创建承诺。

我需要了解如何对不返回任何内容的函数做出承诺,例如 setTimeout。

假设我有:

function async(callback){ 
    setTimeout(function(){
        callback();
    }, 5000);
}

async(function(){
    console.log('async called back');
});

我如何创建一个承诺async后可返回setTimeout准备好callback()?

我以为包装它会带我去某个地方:

function setTimeoutReturnPromise(){

    function promise(){}

    promise.prototype.then = function() {
        console.log('timed out');
    };

    setTimeout(function(){
        return ???
    },2000);


    return promise;
}

但我无法思考除此之外的事情。


更新(2017)

2017 年,Promises 内置于 JavaScript 中,它们是由 ES2015 规范添加的(polyfills 可用于过时的环境,如 IE8-IE11)。他们使用的语法使用您传递到的回调Promise构造函数(Promise executor)它接收解析/拒绝承诺的函数作为参数。

首先,自从async现在在 JavaScript 中具有意义(即使它在某些情况下只是一个关键字),我将使用later作为函数的名称以避免混淆。

基本延迟

使用原生 Promise(或忠实的 Polyfill),它看起来像这样:

function later(delay) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay);
    });
}

请注意,这假设版本为setTimeout符合浏览器的定义 where setTimeout不会将任何参数传递给回调,除非您在时间间隔后给出它们(这在非浏览器环境中可能不是这样,并且过去在 Firefox 上不是这样,但现在是这样;在 Chrome 上甚至是后面也是这样在 IE8 上)。

基本延迟与价值

如果您希望您的函数可以选择传递分辨率值,则在任何允许您提供额外参数的模糊现代浏览器上setTimeout延迟后,然后在调用时将它们传递给回调,您可以执行此操作(当前的 Firefox 和 Chrome;IE11+,大概是 Edge;notIE8 或 IE9,不知道 IE10):

function later(delay, value) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay, value); // Note the order, `delay` before `value`
        /* Or for outdated browsers that don't support doing that:
        setTimeout(function() {
            resolve(value);
        }, delay);
        Or alternately:
        setTimeout(resolve.bind(null, value), delay);
        */
    });
}

如果您使用 ES2015+ 箭头函数,则可以更简洁:

function later(delay, value) {
    return new Promise(resolve => setTimeout(resolve, delay, value));
}

or even

const later = (delay, value) =>
    new Promise(resolve => setTimeout(resolve, delay, value));

可取消的延误(含价值)

如果你想让取消超时成为可能,你不能只返回一个承诺later,因为承诺无法取消。

但是我们可以轻松地返回一个对象cancel方法和 Promise 的访问器,并在取消时拒绝 Promise:

const later = (delay, value) => {
    let timer = 0;
    let reject = null;
    const promise = new Promise((resolve, _reject) => {
        reject = _reject;
        timer = setTimeout(resolve, delay, value);
    });
    return {
        get promise() { return promise; },
        cancel() {
            if (timer) {
                clearTimeout(timer);
                timer = 0;
                reject();
                reject = null;
            }
        }
    };
};

实例:

const later = (delay, value) => {
    let timer = 0;
    let reject = null;
    const promise = new Promise((resolve, _reject) => {
        reject = _reject;
        timer = setTimeout(resolve, delay, value);
    });
    return {
        get promise() { return promise; },
        cancel() {
            if (timer) {
                clearTimeout(timer);
                timer = 0;
                reject();
                reject = null;
            }
        }
    };
};

const l1 = later(100, "l1");
l1.promise
  .then(msg => { console.log(msg); })
  .catch(() => { console.log("l1 cancelled"); });

const l2 = later(200, "l2");
l2.promise
  .then(msg => { console.log(msg); })
  .catch(() => { console.log("l2 cancelled"); });
setTimeout(() => {
  l2.cancel();
}, 150);

2014年的原始答案

通常你会有一个承诺库(你自己编写的库,或者现有的几个库之一)。该库通常会有一个您可以创建并稍后“解析”的对象,并且该对象将有一个您可以从中获得的“承诺”。

Then later往往看起来像这样:

function later() {
    var p = new PromiseThingy();
    setTimeout(function() {
        p.resolve();
    }, 2000);

    return p.promise(); // Note we're not returning `p` directly
}

在对该问题的评论中,我问:

您是否想创建自己的承诺库?

你说

我不是,但我想现在这实际上就是我想要理解的。图书馆会如何做到这一点

为了帮助理解,这里有一个非常非常基本例如,它远程不符合 Promises-A:实时复制

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Very basic promises</title>
</head>
<body>
  <script>
    (function() {

      // ==== Very basic promise implementation, not remotely Promises-A compliant, just a very basic example
      var PromiseThingy = (function() {

        // Internal - trigger a callback
        function triggerCallback(callback, promise) {
          try {
            callback(promise.resolvedValue);
          }
          catch (e) {
          }
        }

        // The internal promise constructor, we don't share this
        function Promise() {
          this.callbacks = [];
        }

        // Register a 'then' callback
        Promise.prototype.then = function(callback) {
          var thispromise = this;

          if (!this.resolved) {
            // Not resolved yet, remember the callback
            this.callbacks.push(callback);
          }
          else {
            // Resolved; trigger callback right away, but always async
            setTimeout(function() {
              triggerCallback(callback, thispromise);
            }, 0);
          }
          return this;
        };

        // Our public constructor for PromiseThingys
        function PromiseThingy() {
          this.p = new Promise();
        }

        // Resolve our underlying promise
        PromiseThingy.prototype.resolve = function(value) {
          var n;

          if (!this.p.resolved) {
            this.p.resolved = true;
            this.p.resolvedValue = value;
            for (n = 0; n < this.p.callbacks.length; ++n) {
              triggerCallback(this.p.callbacks[n], this.p);
            }
          }
        };

        // Get our underlying promise
        PromiseThingy.prototype.promise = function() {
          return this.p;
        };

        // Export public
        return PromiseThingy;
      })();

      // ==== Using it

      function later() {
        var p = new PromiseThingy();
        setTimeout(function() {
          p.resolve();
        }, 2000);

        return p.promise(); // Note we're not returning `p` directly
      }

      display("Start " + Date.now());
      later().then(function() {
        display("Done1 " + Date.now());
      }).then(function() {
        display("Done2 " + Date.now());
      });

      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 setTimeout 做出承诺 的相关文章

  • 使用 vscode 调试器调试 next.js

    我已经使用安装了一个项目创建下一个应用程序 https github com segmentio create next app 我需要使用我的编辑器 vscode 调试服务器端渲染 所以我访问过vscode recipes 如何调试 ne
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

随机推荐

  • 使用 jodatime 查找剩余日期和时间

    我想使用 joda 时间进行比较 查找剩余天数和两天之间的时间 我正在使用两个像这样的 DateTime 对象 一个正在开始 另一个正在结束 DateTime endDate new DateTime 2011 12 25 0 0 0 0
  • React Redux mapDispatchToProps 与 this.props.dispatch

    到目前为止 我以这种方式使用容器和组件操作
  • Angular 2 - Typescript 函数与外部 js 库的通信

    Using JavaScript Infovis 工具包作为绘制图形和树的外部库 我需要操作节点的 onClick 方法 以便异步发送 HTTP GET 请求到服务器 并将来自服务器的数据分配给 Angular 服务类的属性和变量 通过使用
  • 将未链接的 Excel 图表粘贴到 Powerpoint

    我目前正在进行一个项目 将 50 多组 Excel 图表传输到 Powerpoint 演示文稿 我正在比较 50 多个项目并制作 50 多个相同的图表 我在 Excel 工作簿中设置的方式是 图表始终是相同的图表 即图表 2 但通过更改唯一
  • 如何获得UCWA和Skype Web SDK的授权?

    我有 Skype for Business 帐户通话 电子邮件受保护 我正在尝试获得授权 我对 lyncdiscover 服务的第一个请求 GET https lyncdiscover shockw4ves onmicrosoft com
  • Sinch SDK - 如何注销用户?

    我正在使用 Sinch SDK 进行即时消息传递 如何注销用户 我有注销用户的按钮 但无法在 Sinch SDK 中实现该功能 他们的文档或示例都没有描述此类功能 sinch客户端没有注销功能 我们认为移动用户是 在线 的 如果您不想接收更
  • 使用 __future__ 还是 future 来编写兼容 python2 和 python3 的代码更好?

    或者在某些特定情况下 其中一种比另一种更好 到目前为止 我所收集到的只是 future 仅适用于 gt 2 6 或 gt 3 3 我当前的代码非常基本 除了使用打印函数调用之外 在 python2 和 3 上运行相同 然而 随着时间的推移
  • Swift 中的宏?

    Swift 目前是否支持宏 或者未来是否计划添加支持 目前我正在分散 Log trace nil function FUNCTION file FILE line LINE 在我的代码的各个地方 在这种情况下 您应该为 宏 参数添加默认值
  • mvtnorm::pmvnorm 的 Rcpp 实现比原始 R 函数慢

    我正在尝试让 pmvnorm 的 Rcpp 版本至少与 R 中的 mvtnorm pmvnorm 一样快 我已经发现https github com zhanxw libMvtnorm并创建了一个带有相关源文件的Rcpp框架包 我添加了以下
  • 子元素点击事件触发父元素点击事件

    假设你有一些这样的代码 div div div div 我不想触发parentDiv当我点击时点击事件childDiv 我怎样才能做到这一点 Updated 另外 这两个事件的执行顺序是怎样的 你需要使用event stopPropagat
  • C strcpy = 未处理的异常:访问冲突写入位置 0x00000000

    我的 strcpy 函数有问题 使用C 这个简单代码 如下 的要点是将字符串从数组复制到指针数组 char string 20 ABCDEFGH 0 char array of pointers 20 now I want to copy
  • Python 中的列表

    python中的List是同质的还是异质的 gt gt gt def a pass gt gt gt lst 1 one 1 one a 1 1 1 True set 1 gt gt gt for each in lst print typ
  • 猫鼬重复键错误与 upsert

    我有重复密钥的问题 找了好久都找不到答案 请帮助我解决这个问题或解释为什么我收到重复的密钥错误 Trace MongoError E11000 duplicate key error collection project monitor i
  • 制作稀疏矩阵时出错

    我面临着一个我不明白的问题 这是建议答案的后续行动here and here 我有两个结构相同的数据集 我创建的一个是代码可以工作的可重现示例 另一个是代码不起作用的真实示例 盯着它几个小时后 我找不到导致错误的原因 下面给出了一个有效的例
  • 如何使用 MockMvc 测试 Spring 控制器方法?

    我正在使用 spring 3 2 0 和 junit 4 这是我需要测试的控制器方法 RequestMapping value Home public ModelAndView returnHome return new ModelAndV
  • 在 Matlab 中通过约束最大化 3x+y

    我需要在 matlab 中最大化方程 3x y 并具有以下约束 2x y 0 我很难弄清楚如何以一种可以将它们与原始方程联系起来的方式加入约束 我是 matlab 新手 很难弄清楚这一点 提前致谢 正如 Franck提到的 你可以一般使用f
  • Oracle 中的字符串聚合:多行合并为单列

    您好 我在 oracle 中有以下字符串聚合函数 CREATE OR REPLACE FUNCTION STRING AGGREGATE i query VARCHAR2 i seperator VARCHAR2 DEFAULT RETUR
  • 在 JavaScript 中将一个项目从一个数组添加到另一个数组之前比较两个数组[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我有两个数组 var addFrom orange banana watermelon lemon peach var addTo pear tangerine grape or
  • C++ 类和相互链接的对象形成一个循环

    我怎样才能实现在C 中形成循环的互锁对象结构 class Foo Bar bar class Bar Foo foo Foo h include
  • 如何从 setTimeout 做出承诺

    这不是一个现实世界的问题 我只是想了解如何创建承诺 我需要了解如何对不返回任何内容的函数做出承诺 例如 setTimeout 假设我有 function async callback setTimeout function callback