主页 / 问题 / 1183856
Accepted
Dmitrii
Asked:2020-09-29 17:25:41 +0800 CST2020-09-29 17:25:41 +0800 CST

JavaScript 承诺

  • 772

有必要为该站点制作拐杖。该站点是使用 WebSocket 构思的，但由于某种原因，它在生产中被禁止（禁止使用 wss）。有一项任务是在不使用 wss 的情况下重做所有事情。有必要在服务器的命令下向浏览器发送消息。甚至更早的时候，使用了 XMLHttpRequest，但它不适合，因为 浏览器对 XMLHttpRequest 连接数有限制 (5-8)。

JSF + primephases 上的项目服务器端。

来自服务器的命令必须足够快地到达网络 + 可以有很多用户，因此对服务器的定期请求（每秒一次）不太适合。

我想创建异步 js 请求。对服务器的常规请求是有效的，在服务器想要发送命令之前，您不必将响应发送回浏览器。当服务器发送响应时，js 会接收到，做它需要做的，并立即发送另一个类似的请求。循环将重复。但！如果 js 正在等待命令，则 js 的其余部分“挂起”并等待响应。看起来你可以发出异步请求，这样在向服务器发送请求后，其余的 JS 将继续工作，但由于某种原因它对我不起作用。

我正在使用承诺。做了一个测试程序。按照设计：定时器的更新每秒调用一次。一个等待 4 秒的计时器。我希望每秒更新一个计时器。第二次是 4（嗯，或者每秒相同的时间，但有延迟，有一些相移）。

<html>
<head>
<script type="text/javascript">
var el;
var el2;
var i=0;
var i2=0;
onload = function(){
setInterval(function(){
    update();
    update2();
    },1000);
}

var update = function(){
newPromise().then(
function(){
            el = document.getElementById("test");
            i=Number(i)+Number(1);
            el.innerText = i;}
            );
};

function newPromise(){ 
return new Promise(
    function (resolve, reject) {
        if (true) {
            sleep(4000);
            resolve(true); 
        } else {
            var reason = new Error('error');
            reject(reason); 
        }
    }
);
}

function update2(){
    el2 = document.getElementById("test2");
    i2=Number(i2)+Number(1);
    el2.innerText = i2;
}

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}
</script>
</head>
<body>
<h1 id="test">1</h1>
<h1 id="test2">1</h1>
</body>
</html>

但它不起作用。代码等待这 4 秒。并且没有超出我的预期。这就是 Promise 的实际工作方式，如果不是，可以使用什么？

javascript

1 个回答

  1. Best Answer

    像这样的东西：

    let g_i = 1;
const field = document.querySelector('h1');
function updateLoop() {
  getDelayedServerData(g_i)
    .then(res => {
    field.innerText = res.args.data;
    g_i++;
    setTimeout(updateLoop)
  });
}
updateLoop();


function getDelayedServerData(i) {
  return fetch('https://httpbin.org/delay/2?data='+i).then(res => res.json());
}

{ // Другой js в это время прекрасно работает 
  const sec = document.getElementById('second');
  let i = 0;
  setInterval(() => {
    second.innerText = ++i;
  }, 1000);
}
    <h1>0</h1>
<span id="second"></span>

    setInterval 将不可避免地产生滑点问题。当收到对前一个请求的响应时，您需要发送下一个请求，而不是通过计时器。

    • 1

相关问题