javascript中Promise深入理解(一)

最新推荐文章于 2024-04-12 08:06:32 发布

卖菜的小白

最新推荐文章于 2024-04-12 08:06:32 发布

阅读量278

点赞数 1

分类专栏：异步编程 Promise 文章标签： javascript Promise 异步编程

本文链接：https://blog.csdn.net/weixin_47450807/article/details/114067089

版权

javascript中Promise深入理解

因为js是单线程的脚本语言，所以在执行代码时会先执行主程序中的代码，如果需要加载的程序，会先加载，待其加载完成后，将其丢到主程序中执行。
下面是一个简单的异步操作：

<!DOCTYPE html>
<html lang="cn">
<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>
  <style>
    div{
    
      width: 200px;
      height: 200px;
      background: green;
      position: absolute;
      left:0px;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    function interval(callback,time){
    
      let id = setInterval(()=>{
    
        callback(id)
      },time)
    }
    interval((idC)=>{
    
      let div = document.querySelector("div");
      let left = parseInt(window.getComputedStyle(div).left);
      div.style.left = left+ 10+"px";
      if(left >=200){
    
        clearInterval(idC);
      }
    },100)
    console.log("2021");
    // 注意：在js的定时器中，定时器返回的值是定时器的编号。
    // 因为js是单线程的语言，所以在js中只会执行主程序，不断轮询主程序
  </script>
</body>
</html>

这里设置定时器，因为定时器需要等待，所以当该程序运行时，会将定时器模块丢到定时器模块加载，此时主程序会将主程序中的文件先执行，待定时器模块加载完毕后，会将其丢到主程序中等待执行。此时主程序会不断地进行轮询操作。
下面是图片加载操作：

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

<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>
    function imageLoad(src, resolve, reject) {
    
      let image = new Image();
      image.src = src;
      image.onload = resolve(image);
      image.onerror = reject;
    }
    setTimeout(() => {
    
      imageLoad('./img_1.jpg', function () {
    
        document.body.appendChild(arguments[0]);
        console.log("图片加载成功");
      }, () => {
    
        console.log("图片加载失败");
      })
    }, 1)
    console.log("图片加载的小demo");

    // 这里是异步处理，首先图片加载需要耗时，所以会在另一个内存空间内进行处理，当处理完成后，处理的结果会返回主程序
    // 此时javascript会优先处理主程序中的程序，并且会不断的轮询其他完成了的程序
  </script>
</body>

</html>

解析：这里是异步处理，首先图片加载需要耗时，所以会在另一个内存空间内进行处理，当处理完成后，处理的结果会返回主程序。此时javascript会优先处理主程序中的程序，并且会不断的轮询其他完成了的程序。
Promise简介：

<script><

最低0.47元/天解锁文章

卖菜的小白

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript中Promise深入理解(一)

javascript中Promise深入理解因为js是单线程的脚本语言，所以在执行代码时会先执行主程序中的代码，如果需要加载的程序，会先加载，待其加载完成后，将其丢到主程序中执行。下面是一个简单的异步操作：<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫