暂停JavaScript代码的不同方法

吴欣
385 阅读3分钟

在这篇文章中，我们将详细了解暂停运行中的JavaScript代码的必要性，以及有哪些不同的方法可以实现它，如SetTimeout和async/await。

目录

  1. 为什么我们需要暂停？
  2. 不同的方法
    • 睡眠
    • SetTimeout
    • async/await

为什么我们需要暂停一个正在运行的代码？

让我们假设你做了一个网页，你想在该网页中从不同的资源中获取数据，获取后你想显示一条名为 "感谢您的访问 "的消息，所以在这种情况下，由于资源是不同的，获取需要一些时间，但要显示的消息却不需要时间，所以为了在获取数据后显示一条消息，我们需要暂停这一行代码，直到我们的数据被取走。

例子
case -1 没有任何停顿

 function hello()
{
    console.log("THANKS FOR VISITING");
}
hello();
console.log("HELLO THERE");

OUTPUT

THANKS FOR VISITING
HELLO THERE

案例-2

function hello()
{
    console.log("THANKS FOR VISITING");
}
hello();
setTimeout(hello, 3000);  // pausing execution of this particular line.
console.log("HELLO THERE");

OUTPUT

HELLO THERE
THANKS FOR VISITING

暂停代码的不同方法

  1. 睡眠（SLEEP
    暂停代码的方法之一是睡眠，但是javascript强烈建议这样做，因为与其他编程语言不同，javascript是单线程语言，所以如果我们把它放在睡眠状态，它将阻塞线程，从而终止执行。

实行方法

function sleep(seconds) {
   var currentTime = new Date().getTime();
   while (currentTime + seconds >= new Date().getTime()) {
   }
}

2. setTimeout()
setTimeout()方法在你想以异步的方式只执行一个代码块时非常有用。例如，在指定的时间后向用户显示一条信息，而不考虑调用函数的顺序。

SYNTAX:

setTimeout(functionName, milliseconds);

第一个参数是函数的名称
，第二个参数是你希望函数被执行的时间。

执行

console.log("Hello");
setTimeout(() => {  console.log("World!"); }, 1500);
console.log("Friends");

OUTPUT

Hello
Friends
World!

3.异步/等待
让我们来谈谈什么是promise和async await。
Promise是一个javascript结构，表示一个未来的未知值。如果我们把它归类，可以说它是一个javascript，承诺我们返回一些东西，不管是成功获取的数据还是对象的错误，甚至是网络错误。

   const promise =new Promise((resolve, reject) =>{
       if(response.status == 200)
          {resolve(response.body)}
       else 
       {
          const error = {...}
          reject(error)
       }
       })
   promise.then(res => {
          console.log(res)
   })
   .catch(err =>
      {console.log(err)})

因此，我们可以使用承诺来做异步工作，并且可以确定我们将在未来得到一个值。
Async/Await是一种写承诺的方式，它允许我们以同步的方式编写异步代码。

实施

const getData = async () => {
    const response = await fetch("https://iq.opengenus.org/")
    const data = await response.json()
    
    console.log(data)
}

getData()

所以，在这里，与上面的代码相比也没有什么变化，因为我们仍然在使用承诺来获取数据，但现在它看起来是同步的，我们不再有.then和.catch块。

总结-> async/Await让我们使用生成器来暂停一个函数的执行。

通过OpenGenus的这篇文章，你一定对暂停JAVASCRIPT代码的不同方式有了完整的了解。

avatar
文章
阅读
粉丝