简单的倒计时器打字稿

2024-04-07

我的构造函数中有以下代码:

constructor(){
for (let i = 0; i < 90; i++) {
  setTimeout(() => {
    this.counter = this.counter - 1;
  }, 1000)
 }
}

我真正想要的是显示一个倒计时 90 秒的数字。现在它立即从 90 倒数到 0


您可以使用setInterval相反,让该函数每 1 秒调用一次,直到计数器达到 0:

class Timer {
    constructor(public counter = 90) {

        let intervalId = setInterval(() => {
            this.counter = this.counter - 1;
            console.log(this.counter)
            if(this.counter === 0) clearInterval(intervalId)
        }, 1000)
    }
}

或者如果你想要一些看起来像for和用途setTimeout你可以用async/await和承诺(诚然,对于这个简单的例子来说这可能有点过分了):

function delay(delay: number) {
    return new Promise(r => {
        setTimeout(r, delay);
    })
}
class Timer {
    constructor(public counter = 90) {
        this.doTimer();
    }
    async doTimer() {
        for (let i = 0; i < this.counter; i++) {
            await delay(1000);
            this.counter = this.counter - 1;
            console.log(this.counter);
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

简单的倒计时器打字稿 的相关文章

随机推荐

  • 黑莓中两个不同版本(4.6、4.7 和 5.0+ 以上)的一个构建

    我想导入黑莓 5 0 及更高版本的 facebook 库 但不想导入 4 6 和 4 7 的这些库 我尝试通过以下链接使用 4 7 及更高版本的预处理器 http smartfone more blogspot in 2010 05 cod
  • Tkinter 中的 matplotlib 画布上的光标

    我正在使用 Tkinter 模块在 Python 上编写 GUI 包 并通过使用 matplotlib图画布TkAgg显示一些图形数据 我还想通过以下方式与数据的视觉表示进行交互画布 mpl connect方法 一切都工作得很好 但我对默认
  • 查找具有给定 RGB 颜色的像素

    我想在 Python 中获取具有给定 RGB 颜色的像素的所有坐标 这是我正在使用的代码 但它不起作用 我想找到所有黄色像素 from PIL import Image def find rgb imagename r query g qu
  • PHPUnit 打印测试执行时间

    有没有办法用 PHPUnit 打印每个测试的执行时间 只需添加 log junit my tests log xml 然后使用电子表格应用程序 Excel Numbers Calc 打开此文件进行查看 您可以获得所需的所有信息 并且可以按测
  • 如何仅保存自定义元以供审阅数据仅在“预览更改”中查看,而不是前端的实际帖子

    我正在尝试添加自定义元并查看 预览更改 我可以看到更改 但更改也适用于前端的实际帖子 我希望更改将在发布或更新时更新到实际帖子 而不是在 预览更改 单击时更新 请帮忙 我已经关注了这个插件 函数 my plugin save post po
  • Cognito - error_description 用户名属性映射

    我已在 Amazon Cognito 中配置了一个用户池 以便能够登录 注册用户 并将 facebook 设置为身份提供商 在我的托管用户界面上 我可以成功单击 继续使用 facebook 但在重定向到 return uri 后 显示以下错
  • URLSession.shared.dataTask接收数据的正确方法

    再会 我在尝试找到检查从 dataTask 接收到的 数据 响应 错误 并进行一些特殊错误处理时的正确顺序时有点困惑 通常我们的 URLSession 看起来像这样 class HTTPRequest static func request
  • 在 Windows 上从源代码编译 RCurl

    由于没有 Windows 二进制文件v1 95 4 3然而 我需要安装 编译RCurl http cran r project org web packages RCurl index htmlWindows 8 1 上的源代码包 64 位
  • 动态添加/删除页眉和页脚

    我需要能够添加和删除页眉和页脚ListView动态地 所以我用页眉和页脚初始化我的活动 然后在某个时候我想隐藏它们 后来我需要添加以前的页眉和页脚 并保持相同Adapter 所以我找到了这个解决方案 但它很难看 我真的希望还有其他方法 基本
  • 从路径中获取文件名

    从路径获取文件名的最简单方法是什么 string filename C MyDirectory MyFile bat 在这个例子中 我应该得到 MyFile 没有扩展名 该任务相当简单 因为基本文件名只是从文件夹最后一个分隔符开始的字符串的
  • Ruby - 如何将消息长度表示为 2 个二进制字节

    我正在使用 Ruby 并且正在与一个网络端点进行通信 该端点需要在发送消息本身之前格式化 标头 标头中的第一个字段必须是消息长度 它被定义为网络字节顺序中的 2 个二进制字节消息长度 例如 我的消息长度是1024 如何将 1024 表示为二
  • 使用 group_by 完成列并完成

    我在使用 dplyr 时遇到了一些问题group by功能 执行此操作后 datasetALL gt group by YEAR Region gt summarise count number n 这是结果 YEAR Region cou
  • addEventListener 仅在页面刷新时工作?

    我正在修改两个下拉列表的外观 这里没有问题 一切都很好 唯一的问题是addEventListener该方法仅在页面刷新时有效 如何使此代码在页面加载时工作而无需点击刷新按钮 window addEventListener load func
  • 输入中每 4 个字符后插入破折号

    我想在输入中每四个字符后插入一个破折号 我有一个信用卡输入框 当用户输入并到达每个第 4 个字符时 jQuery 将插入一个连字符 例如 1234 5678 1234 1231 UPDATE 我正在尝试一些代码 我认为我非常接近正确的代码
  • 具有模糊轮廓的单张多边形

    我正在寻找一种方法来获得传单多边形的模糊 模糊 渐变轮廓 这应该有助于使国家 地区轮廓更加简单 目前 当您放大代表国家 地区的 svg 时 它会变得丑陋 不准确 我正在考虑将 CSS 属性附加到 svg 上 类似于这样 http www w
  • 计算组平均值,同时排除每个案例的个体值

    我有一个包含 70 个案例 研究参与者 的数据集 是否有一个函数可以计算这 70 个案例的平均值 以便分析中不包含每个单独的案例 这看起来像 mean for case x value 1 value n value x n 任何信息都会有
  • CSS 100% 宽度,每 20px 步长

    是否可以在纯CSS中设置一些宽度变化的步骤 假设我的 div 宽度为 100 所以当容器为 30px 时 它的宽度将为 30px 但是是否可以将一些 跳跃 设置为 20px 这样当容器为 30px 时 它仍然是 20px 但是当容器为 40
  • 使用 EaselJS 的无限画布

    有没有办法用 EaselJS 显示无限画布 我已经阅读了使用 Javascript 或 JQuery 执行此操作的方法 但是有什么方法可以使用 EaselJS 进行管理吗 Thanks 您可以使用 JavaScript jQuery 拖放画
  • Meteor 登录服务未配置

    我正在使用 Meteor loginWithFacebook 来让用户访问我的应用程序 代码是 Meteor loginWithFacebook loginStyle redirect function err if err throw e
  • 简单的倒计时器打字稿

    我的构造函数中有以下代码 constructor for let i 0 i lt 90 i setTimeout gt this counter this counter 1 1000 我真正想要的是显示一个倒计时 90 秒的数字 现在它