时间戳

首页 > 解决方案 > setTimeOut() 以意想不到的方式工作

javascript - setTimeOut() 以意想不到的方式工作

问题描述

我刚开始尝试使用 setTimeout() 函数的异步 JS。我在一个 JS 数组中硬编码了两个对象，并添加了一个以 3S 延迟运行的方法。我编写了另一种打印数组的方法（HTML Response 和 Console.log）。打印到响应似乎工作正常，即在调用posts.push(post)之前，只有两个对象被写入 HTML 响应。

但有时 console.log() 会打印 3 个对象，要么在“开始 addpost”之前，要么有时甚至在addPost()调用之前，而addPost仅在 5000 毫秒后调用。不知道我在这里做错了什么。有人可以帮忙吗？

const posts = [{
    body: "I am Post One",
    title: "Post One"
  },
  {
    body: "I am post two",
    title: "Post Two"
  }
]

function addPost(post) {
  setTimeout(function() {
    console.log("begin addpost");
    let output = "<p> ";
    posts.forEach(function(post) {
      output += (post.body + "<br/>");
    });

    output += "</p>";
    document.body.innerHTML = output;

    posts.push(post);

    console.log("end addpost");

  }, 5000);
}

function getPosts() {
  setTimeout(function() {
    console.log("begin getpost");
    console.log(posts);
    console.log("end getpost");
  }, 1000);
}

console.log(posts);
addPost({
  body: "I am  post Three",
  title: "Post Three"
});
getPosts();

标签： javascriptasynchronous

解决方案

我认为这条线是您的控制台打印 3 个对象而不是两个对象的原因。

posts.push(post);

这是在您不重新初始化帖子对象时引起的。（这实际上需要您重新加载）。我不确定这是您面临的真正问题，但是在阅读了您的代码几分钟后，我看不到任何其他可能性。

此外，如果您尝试使用 JavaScript 进行异步操作，这可能是一种更短、更简洁的方式来做您想做的事情：

const posts = [{
    body: "I am Post One",
    title: "Post One"
  },
  {
    body: "I am post two",
    title: "Post Two"
  }
]
async function wait(ms) {
    // please do read more about Promise & arrow function to understand the syntax.
    return new Promise(_ => setTimeout(_, ms));
}

const getPost = async () => {
    await wait(1000);
    console.log("begin getpost");
    console.log(posts);
    console.log("end getpost");
}

const printPost = async () => {
    await wait(4000);
    console.log("begin addpost");
    let output = "<p> ";
    posts.forEach(function(post) {
      output += (post.body + "<br/>");
    });

    output += "</p>";
    document.body.innerHTML = output;
    console.log("end addpost");
}

(async () => {
    getPost();
    printPost();
})();

这将更具可读性。用 JavaScript 玩得开心！

推荐阅读