按照发送的顺序显示 AJAX 响应,*不*使用排队或同步请求?

2024-02-13

我正在向远程服务器发送一堆 getJSON() 请求(以获取图像),并且我想按照发送请求的顺序显示响应(图像)。问题是,AJAX 是异步的,因此响应可以按照他们想要的任何顺序出现 - 通常都是混合的。

我可以将它们排队或使它们同步 - 一次只发送一个请求 - 但这会严重限制性能。

那么有没有一种方法可以在响应返回时识别哪个响应属于哪个请求?我想你可以将一个“id”变量放入 JSON 回调参数中(例如,callback=response03),然后在响应到达时以某种方式解析该回调函数名称(从而获取 id“03”)。但可能不会。

我的代码是这样的:

// Send off requests for each keyword string
$.each($imageRequests, function() {
    $request = this;
    $url = "http://www.example.com/api?q="+$url;
    $.getJSON($url, function($response) {
        if($response.data.items) {
            $.each($response.data.items, function($i, $data) {
                $imgUrl = $data.url;
                $("#imageList").append($imgUrl);
            });
        }
    });
});

我尝试创建一堆新的 div 来保存返回的图像,认为我可以用它们各自的图像填充 div,但这也不起作用。

// Create new div with unique id using line number
$i = 0;
$.each($lines, function() {
    $newDiv = '<div id="img_'+$i+'"></div>';
    $("#imageList").append($newDiv);
    $i++;
});

// Then do the same as the code above but shove the responses into "#img_$i" using the iterator variable to "keep track" (which didn't work).

我已经搜索过了,虽然有类似的问题 https://stackoverflow.com/questions/5241254/how-to-ensure-ajax-requests-called-in-a-certain-order-get-the-response-in-the-sam关于这里的 AJAX,没有一个像我正在寻找的那样具体。

Thanks.

EDIT- 刚刚去睡觉,但我明天会回来 - 如果可以的话,请回来查看。我真的很感谢你的帮助。 :)


你快到了;只需要创建div的方式是Ajax回调函数可以引用对应的div,即使用closure https://stackoverflow.com/questions/111102/how-do-javascript-closures-work。像这样的事情:

$.each(urls, function(i, url) {
    var div = $('<div />');
    list.append(div); // list is the container element that holds the images

    $.getJSON(url, function(data) {
        // assuming data is an image url - adjust accordingly
        div.append('<img src="' + data + '" />');
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

按照发送的顺序显示 AJAX 响应,*不*使用排队或同步请求? 的相关文章

  • JQUERY 中用于加载 JQGRID 的选项卡

    我正在使用 jqgrid 制作网格 我想在我的应用程序中创建选项卡 单击选项卡应打开一个网格 选项卡的名称应显示在页面顶部 当我单击另一个选项卡时 它应该加载另一个网格 网格应该加载在同一页面上 并且选项卡也应该始终出现在页面上 我已经创建
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 为什么 document.getelementbyId 在 Firefox 中不起作用?

    我不明白为什么 document getElementById 在 Firefox 中不起作用 document getElementById main style width 100 当我检查 Firebug 时 它说 类型错误 docu
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • Cosmos DB 中的 MaxItemCount 源选项属性不起作用

    我正在尝试编写一个运行 SQL 查询的简单存储过程 并且我想通过使用 MaxItemCount 属性来限制结果 查询生成 3 个文档 但我只想返回 1 个文档 我使用 MaxItemCount 属性强制执行此限制 但这似乎不起作用 func
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗

随机推荐

  • 在模式匹配时修改字段

    我今天第一次尝试 Rust 编写 XML 分词器 自然不明白所有内容 我有一个带有可以采用枚举值的字段的结构 enum State Outside InATag str struct Tokenizer state State In a i
  • 如何禁止在webpack编译过程中替换process.env变量?

    Story 我正在开发 AWS Lambda 函数并使用编译代码webpack 我读过一些文章 似乎process env变量在编译期间自动替换 虽然这很酷 但我想禁止这种行为 Why 因为我使用 AWS Lambda 仪表板传递环境变量
  • golang docker run的无限for循环问题

    我尝试做简单的无限循环任务 不使用 docker 也能正常工作 但是当我使用 docker 时 它只无限执行 for 循环的 else 部分 实际上可能是什么问题 docker 是否有无限循环的问题 我的 main go 文件如下所示 pa
  • Word 2010 Interop PDF 导出缺少边框线

    我有一个奇怪的问题 我正在使用 Word 2010 Interop 将 WordML 文档导出为 PDF 有一个带有顶线和底线的页脚
  • 带 ViewPager 的 CollapsingToolbarLayout 内的片段不会向下滑动

    我有一个带有 CollapsingToolbarLayout 和 TabLayout 的活动 当我左右滑动时 它在片段之间完美移动 然而 当我尝试向下滚动 屏幕截图中的红色箭头 时 它会忽略它 我尝试向片段添加 ScrollView 但它没
  • 该证书在 ios 钥匙串中的颁发者无效

    钥匙串显示证书错误 gt 该证书的颁发者无效 请参阅屏幕截图 参考链接 gt 该证书的颁发者钥匙串无效 https stackoverflow com questions 28890084 this certificate has an i
  • 您可以在 asp:Menu 控件中有 2 个指向同一页面的 url 吗?

    我有一个 asp Menu 它包含一个指向的顶级菜单项http www example com one aspx http www example com one aspx 当您将鼠标悬停在顶级菜单项上时 它会显示一个下拉菜单 其中一个选项
  • 强制绝对 div 听父母的填充?

    这就是我的 HTML CSS现在好像 这就是我的want它看起来像 如何修改下面的 HTML CSS 使其按照我想要的方式显示 HTML div div div class update div div div CSS update wid
  • Sphinx 无法导入任何内容

    我正在尝试使用 sphinx 来记录我的项目 我在所有模块和文件中使用了 autodoc 字符串 我使用sphinx apidoc自动生成rst我的代码的文件 到目前为止 一切都很好 问题是sphinx 无法导入我的任何模块 即使我已将我的
  • 读取 post 请求值 HttpHandler

    我正在编写一个小型 Java 应用程序 它实现了一个从客户端接收 http post 命令的 http 服务 我用来实现所有这些的类是 com sun net 中的 HttpHandler 和 HttpServer 包裹 现在我正在实施一个
  • 如何将类型“UnityEngine.Texture2D”转换为“UnityEngine.Sprite”?

    您好 我尝试将纹理 2D 转换为图像 并且我无法使用原始图像 因为分辨率在手机中不匹配 但问题是图像没有纹理元素 如何在Image Sprite中转换UnityEngine Texture2D Image Profile protected
  • 默认情况下“git update-index --assume-unchanged”

    git 有没有办法得到结果git update index assume unchanged FILE NAME默认情况下在一组给定的文件上 例如 一个 git config 文件列出了默认情况下不跟踪更改的文件 这样我们在克隆存储库后就不
  • Android View.getDrawingCache返回null,仅null

    有人可以试着向我解释一下为什么吗 public void addView View child child setDrawingCacheEnabled true child setWillNotCacheDrawing false chi
  • DICOM图像的窗宽和中心计算

    DICOM 图像 CT 中的 重新缩放截距 和 重新缩放斜率 是什么 如何计算窗口宽度和窗口中心 应用重新缩放截距和斜率将图像的像素值转换为对应用程序有意义的值 例如 原始像素值可以存储设备特定值 该值仅在由生成它的设备使用时才有意义 将重
  • E/SQLiteLog(1893): (14) 无法打开 [00bb9c9ce4] 第 30176 行的文件

    我在用本教程 http www reigndesign com blog using your own sqlite database in android applications 将数据库导入我的应用程序 它在 API 10 上运行良好
  • 我的 php 错误日志文件为空

    如果我在 php ini 文件中启用 error log 选项 那么我在配置的错误文件中什么也得不到 并且 加载页面时与服务器的连接已重置 在浏览器 火狐 中 如果我禁用它 我会在浏览器中显示错误 我在 Windows 7 系统 64 位上
  • 在 R 中提取名字

    假设我的数据框中有一个人名向量 names lt c Bernice Ingram Dianna Dean Philip Williamson Laurie Abbott Rochelle Price Arturo Fisher Enriq
  • C# 中的浮点数学一致吗?是真的吗?

    不 这不是另一个 为什么是 1 3 0 3 1 问题 我最近读了很多关于浮点的文章 具体来说 如何相同的计算可能会得到不同的结果在不同的架构或优化设置上 对于存储重播的视频游戏来说 这是一个问题点对点网络 https gamedev sta
  • GridView:单击按钮时获取行的数据键

    当我在具有 OnClick 事件的行中有一个按钮时 如何获取 GridView 行的 DataKeyName 的值 在按钮的 OnClick 事件中 我想获取按钮所在行的 DataKeyName 这可能吗
  • 按照发送的顺序显示 AJAX 响应,*不*使用排队或同步请求?

    我正在向远程服务器发送一堆 getJSON 请求 以获取图像 并且我想按照发送请求的顺序显示响应 图像 问题是 AJAX 是异步的 因此响应可以按照他们想要的任何顺序出现 通常都是混合的 我可以将它们排队或使它们同步 一次只发送一个请求 但