【科技与狠活】—— JS实现页面阻塞三秒

彩色之外

已于 2023-06-09 17:38:14 修改

阅读量3.1k

点赞数 6

分类专栏： # Js 文章标签：科技 while 循环进程 js

于 2022-11-16 16:21:18 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/127885750

版权

Js 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

回顾前期
【背景渐变】 —— 就算没接触过也能一遍学会哦_0.活在风浪里的博客-CSDN博客渐变教程https://blog.csdn.net/m0_57904695/article/details/127869036?spm=1001.2014.3001.5501

阻塞页面

假如你来实现，一开始是不是会想到定时器，没错，可以、但是不是最简单的实现方式，js虽是单线程但是有同步异步

可以看到先执行l同步 log , 再去执行定时器，正常

使用循环阻塞

先看程序执行的时间

    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', new Date().getTime());
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', new Date().getTime());

输出两行几乎不会变，程序执行太快

 console.log('\😂👨🏾‍❤️‍👨🏼==>： ', new Date().getTime());
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', 1);
    console.log('\😂👨🏾‍❤️‍👨🏼==>： ', new Date().getTime());

这就可以看出差异了，最后以为由2 变成 3了


    // 获取当前毫秒数，不刷新页面或不调用其他函数，这个值不会变化
    let start = new Date().getTime();
    /* 两次的时间不会差太多程序执行顺序太快基本不会变，
    当前时间小于开始时间加上3000毫秒，就执行后面花括号里的代码，
    这里是continue，可以写 {} ，也可以写 continue(执行到这就会跳出本次循环继续下次) */
    while (new Date().getTime() < start + 3000) continue
    console.log("以上代码阻塞了浏览器渲染3s，上面的代码执行完毕后，浏览器才会继续渲染页面");

promise 阻止代码向下执行3秒钟

async function asyncFunc()
        {
            await new Promise(resolve => setTimeout(resolve, 3000));
             console.log('😂👨🏾‍❤️‍👨🏼==>：', 123456);
        }
        asyncFunc()

while循环

语法:
while (循环条件) {
    重复执行的代码(循环体)
}

例子

 // 1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }

//页面输出1~100 累加和

   let i = 1  // 变量的起始值
     let sum = 0  // 累加和变量
     while (i <= 100) {
       // 把i 累加到 sum 里面
        //sum = sum + i
        sum += i
        i++
    }
    console.log(sum) // 5050

//页面输出1~100 偶数和

   let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数 只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i
      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)

循环退出

continue 推出本次循环继续下次循环

break 退出整个循环


    let i = 1

    while (i <= 10) {

      console.log(i)

      if (i === 5) {

        break 

      }

      i++
   }

// 等于5退出循环 不在执行i++ 输出1 2 3 4 5

死循环


    let i = 1
    while (i <= 10) {// i++ 加不到10的时候条件永远成立，想要造就死循环就让循环体永远加不到10

      console.log(i)
     
      if (i === 5) {

        continue  

      } else {

      i++  

     }

   }

// 等于5 退出本次循环，不在执行下面逻辑。再次重头执行，在次到5停止，生生不息，直到崩溃！！！

do while

会先执行一次，在判断条件

// 语句

do {

     循环体语句；

} while（条件判断语句）;

例子

    let i = 1
    do
    {
        i++
        // 输出 2 走到while条件哪里，不满足，再次执行。输出 3 走到while条件哪里，满足退出循环
        console.log('\😂👨🏾‍❤️‍👨🏼==>： ', i);// 2 3
    } while (i < 3)