iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js promise 中使用 setTimeout 实现暂停执行的效果
  • 857
分享到

js promise 中使用 setTimeout 实现暂停执行的效果

摘要

在使用 promise 时,需要使用 setTimeout 来进行延时执行 对 promise 还不太熟悉的同学可能第一时

在使用 promise 时,需要使用 setTimeout 来进行延时执行

对 promise 还不太熟悉的同学可能第一时间想到的是这样的写法

如:

run();

async function run() {

      console.log('1');
      
      // 等待两秒之后执行
      setTimeout(() => {

          const data = await getData();

          console.log(data);
          
      }, 200);
      
  }

function getData() {

      return new Promise((resolve, reject) => {

          resolve("200");
          
      })
      
}

这样写 await 就报错了

想要实现延时效果,我们这里先封装个sleep

function x_sleep(time) {

        return new Promise(resovle => {

            setTimeout(() => {

                resolve();
                
            }, time)
            
        })
        
 }

此时就可以通过我们的 sleep函数去进行延时处理了

完整代码:

run();

    async function run() {

        console.log("1");

        // 停止2秒
        await x_sleep(2000);

        const data = await getData();

        console.log(data);
        
    }

    function getData() {

        return new Promise((resolve, reject) => {

            resolve("200");
            
        })
        
    }

    function x_sleep(time) {

        return new Promise(resolve => {

            setTimeout(() => {

                resolve();
                
            }, time)
            
        })
        
    }

到此这篇关于js promise 中使用 setTimeout 实现暂停执行 的文章就介绍到这了,更多相关js使用 setTimeout 实现暂停执行 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: js promise 中使用 setTimeout 实现暂停执行的效果

本文链接: https://www.lsjlt.com/news/210709.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js promise 中使用 setTimeout 实现暂停执行的效果
    在使用 promise 时,需要使用 setTimeout 来进行延时执行 对 promise 还不太熟悉的同学可能第一时...
    99+
    2023-05-17
    js使用 setTimeout暂停执行 js暂停执行 js promise暂停执行
  • JS中promise的回调和setTimeout的回调哪个先执行
    这篇文章将为大家详细讲解有关JS中promise的回调和setTimeout的回调哪个先执行,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么?c...
    99+
    2023-06-29
  • javascript怎么实现暂停时间的效果
    JavaScript 是一门广受欢迎的编程语言,常常用于构建动态网页和交互式应用程序。在 Web 开发中,控制时间是重要的一部分,因为时间会影响到页面的元素、动画以及用户交互等方面。在 JavaScript 中,我们有多种方式来控制时间,包...
    99+
    2023-05-14
  • 使用js实现瀑布流效果
    本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 源码: <!DOCTYPE html> <html lang="en"> &...
    99+
    2024-04-02
  • Java中的线程如何使用使用join方法进行暂停
    Java中的线程如何使用使用join方法进行暂停?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。具体内容如下Java代码:package Threads;import java....
    99+
    2023-05-31
    java join 线程
  • 怎么使用js实现动画效果
    这篇文章主要介绍“怎么使用js实现动画效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用js实现动画效果”文章能帮助大家解决问题。1.动画原理      &nb...
    99+
    2023-07-05
  • arcgis js完整悬停效果实现demo的方法是什么
    这篇文章主要介绍了arcgis js完整悬停效果实现demo的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇arcgis js完整悬停效果实现demo的方法是什么文章都会有所收获,...
    99+
    2023-07-05
  • 如何使用CSS Transitions实现圆形悬停效果
    小编给大家分享一下如何使用CSS Transitions实现圆形悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在线预览 下载源码在今天的教程中,我们将在圆上试验悬停效果。 自从有了border- radius属性,...
    99+
    2023-06-08
  • 如何使用js实现悬浮导航效果
    这篇文章主要介绍了如何使用js实现悬浮导航效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<head>  ...
    99+
    2024-04-02
  • 如何使用js实现图片漂浮效果
    这篇文章给大家分享的是有关如何使用js实现图片漂浮效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 当鼠标在图片上方时,图片停止漂浮,点击关闭按钮可隐藏图片。 <bo...
    99+
    2024-04-02
  • 怎么使用js实现图片轮播效果
    这篇文章主要介绍怎么使用js实现图片轮播效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!只有img标签的html代码,做测试用:<body>  <img...
    99+
    2024-04-02
  • JavaScript动画原理之如何使用js进行动画效果的实现
    目录前言1.动画原理2.动画函数的封装3.给不同元素添加定时器4.缓动动画原理5.给动画添加回调函数6.动画函数的使用写在最后前言 动画对于我们来说都不陌生,css里面就有很多动画,...
    99+
    2023-05-14
    js动画效果有哪些 js动画效果代码案例 javascript动画教程
  • Vue使用Echarts实现排行榜效果
    Vue使用 Echarts 做出排行榜的感觉,供大家参考,具体内容如下 其实这不算是一篇技术文的,就是单纯的echarts调样式就可以,但是有的地方设置还是不好设置的,所以说嘞,就保...
    99+
    2024-04-02
  • 如何使用CSS+JS帮你实现苹果cover flow效果
    小编给大家分享一下如何使用CSS+JS帮你实现苹果cover flow效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!<!DOCTYPE html> &l...
    99+
    2024-04-02
  • 如何使用vbs实现恢复暂停的自动启动服务
    这篇文章主要为大家展示了“如何使用vbs实现恢复暂停的自动启动服务”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用vbs实现恢复暂停的自动启动服务”这篇文章吧。strComputer&nb...
    99+
    2023-06-08
  • 如何使用原生js实现可拖拽效果
    这篇文章主要介绍如何使用原生js实现可拖拽效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE html> <html&...
    99+
    2024-04-02
  • 使用纯CSS、JS实现图片轮播效果的示例
    小编给大家分享一下使用纯CSS、JS实现图片轮播效果的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!js有什么特点1、js属于一种解释性脚本语言;2、在绝大多...
    99+
    2023-06-14
  • 使用css3怎么实现一个文本悬停改变效果
    使用css3怎么实现一个文本悬停改变效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html<h2 class="hover-tex...
    99+
    2023-06-08
  • C#中使用Stopwatch计时器实现暂停计时继续计时功能
    最近程序上用到了计时功能,对某个模块进行计时,暂停的时候模块也需要暂停,启动的时候计时继续 用到了Stopwatch Stopwatch的命名空间是using System.Diag...
    99+
    2024-04-02
  • 如何使用JS时间控制实现动态效果
    这篇文章主要介绍了如何使用JS时间控制实现动态效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如下所示:<script> &n...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作