如何将含有定时器setTimeout函数变为一个同步函数

最新推荐文章于 2023-11-14 09:04:12 发布
最新推荐文章于 2023-11-14 09:04:12 发布
阅读量5.3k 收藏 9
点赞数 2
分类专栏： JavaScript/ES6 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/111914436
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>

</style>
<body>
<script>

const myFun = async () => {
    return new Promise(resolve => {
      setTimeout(() => { // 用定时器模拟异步请求
        const data = [
          { id: 1, name: 'xiaoming', age: 11 },
          { id: 2, name: 'xiaohong', age: 22 },
          { id: 3, name: 'xiaogang', age: 33 },
        ];
        resolve(data);
      }, 1000);
    });
  }
  const myFun2 = async () => {
  res = await myFun();
  console.log('res:', res);
}
myFun2();

</script>
</body>
</html>

原理：使用promise来包裹setTimeout定时器，因为promise对象可以将异步操作以同步操作的流程表达出来，同时避免了层层嵌套的回调函数。

公孙元二
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
通过Promise + setTimeout，实现JavaScript 的同步延迟简单示例
lt_xiaodou的博客
08-24 2933
过去在写 JavaScript 使用的同步延迟时，都是用非同步的 setTimeout 加上 callback 来实现，但如果有很多个任务或流程要执行，就得用上一大堆的 callback，然而 JavaScript 里的 Promise ，刚好就可以用来解决同步与非同步的问题，让整个延迟的过程可以很漂亮简洁且同步的「串」在一起。
js 或 油猴 循环内 setTimeout 同步定时
wuchoujb的博客
05-07 1695
文章目录使用 js 内置方法个人理解代码实现 使用 js 内置方法 使用 await 官方描述 转至官方解释 重点为 暂停 async 方法 ，所以才可以实现 同步定时 个人理解 使用定义异步函数，异步函数内 调用同步方法， 等待同步方法 返回值后，异步方法继续执行 代码实现 function delate(x) { return new Promise(resolve => { setTimeout(() => { co
一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
热门推荐
吴小迪的博客
06-10 5万+
之前翻看别的大佬的博客看到了关于setTimeout，promise还有async执行顺序的文章。观看了几篇之后还是没有怎么看懂，于是自己开始分析代码，并整理了此文章，我相信通过此文章朋友们能对异步同步还有，setTimeout,Promise,async这些内容了然于胸，接下来让我们走入正题： ...
如何通过把setTimeout异步转为同步
最新发布
greed
11-14 667
以下是延时10秒的效果 先打印27秒 等待10秒后执行后面的代码。
同步任务、异步任务、宏任务、微任务、任务的执行过程实例详解、setTimeout()是同步还是异步
qq_56715703的博客
05-07 4307
JavaScript是单线程语言，也就是说，只有一条通道，且js中任务是按顺序依次执行的，但若有一个任务时间过长，就会让后续任务一直等待。为了解决这个问题，将任务分为同步任务和异步任务，异步任务又分为宏任务和微任务。
JavaScript - 定时器
一缕阳光@的博客
04-11 744
目录setTimeout()setInterval()clearTimeout()，clearInterval()实例：debounce 函数运行机制setTimeout(f, 0)含义应用 setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 var timerId = setTimeout(func|code, delay); 上面代码中，setTimeout函数接受两个参数，第一个参数func
javascript中setTimeout
soputasmile的笔记
02-07 2729
1. settimeout用法 1.1 基本使用 语法: setTimeout(code,millisec) code必填，调用函数；millisec非必填，如果不填就认为是0。settimeout()表示millisec毫秒后把code的代码放到执行队列（注意不是立即执行，后面会讲到） 例子： let timeout2 = setTimeout(() => { console.log('haha') }, 1000); 1000ms后会输出‘haha’ 作为定时器使用 let test =
定时器(setTimeout/setInterval)调用带参函数失效解决方法
01-19
2.setTimeout(code,millisec)　setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 参数 描述 code 必需，要调用的函数后要执行的 JavaScript 代码串。 millisec 必需，在执行代码
BOM系列第一篇之定时器setTimeout和setInterval
01-19
它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()用于取消这个函数的执行 　以下代码中，控制台先输出0，大概过1000ms即1s后，输出定时器setTimeout()方法的返回值1 var Timer = setTimeout...
jQuery setTimeout()函数使用方法
12-12
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
关于JS中setTimeout()无法调用带参函数问题的解决方法
10-22
主要介绍了关于JS中setTimeout()无法调用带参函数问题的解决方法,提供了2种解决方法供大家对比参考,需要的朋友可以参考下
异步执行转化为同步执行的方法
qq_51130780的博客
12-21 2357
异步转化为同步的基本思路
setTimeout()是不是真正的异步
qq_42728133的博客
05-19 3423
关于setTimeout是否是异步的问题一直很疑惑，今天查看了几篇他人的解释，做一下个人学习笔记。 首先 执行这样一段代码 console.log(111) setTimeout(() => { console.log(222); }, 3000) console.log(333) setTimeout(() => { console.log(444); }, 0) console.log(555) setTimeout(() => { console.log
深刻理解setTimeout
weixin_57913339的博客
04-19 187
setTimeout的本质不是延迟多长时间执行，而是延迟多长时间把setTimeout中的回调函数放到执行栈中，这也是setTimeout的回调函数执行会比定义的延迟时间稍长的原因。这个时候有一个新的问题出现了，setTimeout本身并没有去调用其他的线程，仅仅是把本身需要执行的代码延后执行，尽管实现了异步操作的样子，但我个人认为，setTimeout并不是严格意义上的异步操作，只能称之为延迟操作。在setTimeout的执行形式上来看，setTimeout是不会阻碍其后续代码的执行的。
TypeScript 基于setTimeout实现在异步方法内同步等待
shaotian100的博客
08-24 2081
同步等待方法封装 async function waitAsync (ms: number): Promise<void> { return new Promise<void>((resolve) => { setTimeout(resolve, ms) }) } 调用DEMO (async () => { await waitAsync(100) console.time('bench 500'
STM32定时器同步模式 四种
学海无涯
01-06 4万+
typedef struct { uint32_t MasterOutputTrigger; //主模式选择。选择具体模式发送到TRG0上。 uint32_t MasterSlaveMode; //主定时器的从模式使能与失能位（TIM_MASTERSLAVEMODE_ENABLE或TIM_MASTERSLAVEMODE_DISABLE） }TIM_MasterConfigT
Promise定时器转为同步
YAYTXT的博客
11-16 185
// 定时器转为同步
ERROR TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
树上骑个猴的博客
08-06 2万+
可能是因为去强制转换了类型，导致失败， 比如 let aa = {age:'123',name:null} let bb = aa.name + "" //这一步想把变成aa转换成字符串，但是null无法通过+""变成字符串，会报错
js 写定时器 多个调用 定时器函数 每个的值不被共享
06-08
如果你需要写一个定时器函数，并且希望多个调用这个函数时，它们的值不被共享，你可以使用闭包来实现。 下面是一个使用闭包的示例代码： ``` function createTimerFunction(interval) { let count = 0; const timer = setInterval(function() { count++; console.log(count); }, interval); return function stopTimer() { clearInterval(timer); } } const stopTimer1 = createTimerFunction(1000); const stopTimer2 = createTimerFunction(2000); // 等待一段时间后，分别停止两个定时器 setTimeout(function() { stopTimer1(); stopTimer2(); }, 5000); ``` 在这个例子中，我们定义了一个`createTimerFunction`函数，它返回一个内部函数`stopTimer`。每次调用`createTimerFunction`函数时，它会创建一个新的闭包，其中包含一个定时器对象和一个局部变量`count`。每次定时器触发时，`count`变量的值会自增1，并输出结果。 我们可以使用`createTimerFunction`函数创建两个不同的闭包，它们分别使用不同的时间间隔。这样，我们就可以实现多个调用同一个函数，但是它们的定时器不会相互干扰的效果。 在这个例子中，定时器对象是局部变量，因此它不会被外部的代码所访问到，也就避免了定时器对象被共享的问题。同时，由于每个闭包中都有一个独立的`count`变量，因此也避免了计数器被共享的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值