0

我正在研究一种对 GET 查询提供延迟响应的网络架构。一旦我能够从服务器接收到图像，我希望绘制图像。我正在尝试增加显示功能的延迟时间，以便一旦从服务器获取它就可以绘制它。我正在使用画布显示来自特定 URI 的图片。这是我需要延迟运行的代码部分：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image;
var strDataURI = nameStr;
img.onload = function(){
    context.drawImage(img,0,0, 150,150); // Or at whatever offset you like
};  
img.src = strDataURI;

请帮忙。提前致谢。

4

3 回答 3

2

有几种选择。如果您坚持将其设为计时器，则可以使用setTimeout()。

window.setTimeout(function() { // function code here }, 3000);

您还可以将 ajax 调用设置为同步而不是异步。这将导致其他函数等到它完成后再运行。

$.ajax({
  async: false
});

最后，您可以将 draw 函数放在您的 ajax 调用中。该函数在ajax 调用完成后运行。

$.ajax({
  complete: function(result) {
    // code to perform the draw
  }
});
于 2013-07-02T20:01:22.537 回答
0

试试setTimeout（参考这里http://www.w3schools.com/js/js_timing.asp）

于 2013-07-02T19:58:00.037 回答
0

建议

我的建议是不要拖延。正如 chockleyc 所说，等待响应将是最好的选择。

案例

有以下几种可能的情况：

  1. 您正在发出 GET 请求并等待响应
  2. 您没有手动发出请求，它只是用页面加载

您手动发出 GET 请求

如果您自己进行 GET 查询，我强烈建议您这样使用Promise：

var getRequest = new Promise(function(resolve, reject){
    //We call resolve(...) when what we were doing async succeeded, and reject(...) when it failed.
    //In this example, we use setTimeout(...) to simulate async code. 

    var oReq = new XMLHttpRequest();

    oReq.onload = function(e) {
        resolve(oReq.response);
    }
    oReq.open("GET", "www.bananas.com");
    oReq.send();
});

然后你会像这样使用它：

var getRequest()
    .then(console.log);

在这种情况下会打印响应。如果你不熟悉，我推荐MDN Promises 文档。

另一种选择是简单地使用 JavaScript 中的 XMLHttp 而无需承诺。您也可以阅读MDN 文档中的更多示例，或者如果它对您来说太混乱了，请尝试kirupa 教程。

您不会手动发出 GET 请求

在这种情况下，我建议您侦听 GET 请求，然后在其响应到达后执行特定操作。可以在此响应中找到一个很好的解决方案：

在那里你会找到一个可以监听所有 GET 请求的迷你库。这样，每次收到 GET 请求时，您都可以根据需要对其进行过滤并执行代码。

如果前面的代码对你来说太复杂了，你也可以看看这个更简单的替代方案：

你真的坚持使用计时器

迄今为止最糟糕的解决方案。为什么？尝试回答以下问题：

  1. 如果图像未在您预期之前到达，会发生什么？而不是 1 秒，如果需要 2 秒呢？
  2. 您如何确切地知道 GET 请求需要多长时间？你会发出 100 个请求的中位数吗？如果您收到一个超出中位数的请求怎么办？
  3. 假设您总是等待尽可能长的时间（以确保一切正常），为什么您的大多数用户的体验会较弱？

但是，如果您坚持这样做，那么“chockleyc”和“Johannes P”的答案都应该澄清您的所有问题。

暂时就这些了，希望对你有帮助！

于 2017-03-07T13:56:38.317 回答