【JS】自定义循环尝试函数

最新推荐文章于 2024-06-10 22:18:41 发布

田本初

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量234

点赞数 8

分类专栏： JavaScript 面试题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/owo_ovo/article/details/137050105

版权

JavaScript 同时被 2 个专栏收录

70 篇文章 1 订阅

订阅专栏

面试题

47 篇文章 0 订阅

订阅专栏

需求

封装一个函数，可以自定义尝试次数count以及单次延迟时间delay。
每delay时间尝试调用一次回调函数，等待回调函数中的逻辑处理完毕后，如果回调函数成功，则停止循环尝试，否则直至尝试count次，抛出失败。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 自定义循环
    setTimeout(() => {
      const newDiv = document.createElement('div');
      newDiv.textContent = '这是一个新的 div 元素';
      newDiv.style.color = 'red';
      document.body.appendChild(newDiv);
    }, 3000);

    async function loopWithInterval(fn, count, delay) {
      let loopCount = 0 // 计数器
      const intervalId = setInterval(async () => {
        loopCount++
        // 运行回调函数 判断是否执行成功
        await fn().then(res => {
          clearInterval(intervalId) // 清空计数
          console.log(`循环了${loopCount}次`)
        })
        // 循环次数达到指定次数，则停止循环
        if (loopCount === count) {
          clearInterval(intervalId)
          resolve("指定次数内，失败")
        }
      }, delay)
    }

    let fn = async () => {
      return new Promise(resolve => {
        let dom = document.querySelector('div')
        console.log(dom);
        dom && resolve(dom) // 获取到dom后 通知停止循环
      })
    }
    loopWithInterval(fn, 10, 500)
  </script>
</body>

</html>

田本初

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS】自定义循环尝试函数

每delay时间尝试调用一次回调函数，等待回调函数中的逻辑处理完毕后，如果回调函数成功，则停止循环尝试，否则直至尝试count次，抛出失败。封装一个函数，可以自定义尝试次数count以及单次延迟时间delay。
复制链接

扫一扫