我目前正在修改一个开源项目(链接)以满足我的需要。
我的英语不好，如果可以点击链接页面，也许会更清楚，加载需要半分钟，浏览器可能似乎冻结了一会儿。
此页面使用Slickgrid，当将鼠标悬停在表格行上时，它会在页面上的固定位置层(左下角)上呈现该行的详细信息。 页面上只有一个这样的详细信息图层，当您将鼠标移动到另一行时，该图层将更改为显示该行的详细信息。 以下代码是它如何实现这一点：
this.grid.onMouseEnter.subscribe( function (e) {}) // use slickgrid to set event listeners
// inside the handler function
from event e, get the row number row.rc
// then calls the staticOverlayDetails function do the actual work. it will renders the presentation layer.
window.setTimeout(function(){staticOverlayDetails(rc.row);}, 30);
所以这个staticOverlayDetails函数将渲染层(一个div元素)以显示行号rc.row的细节，这是鼠标光标所在的位置。
我想收集所有渲染的结果图层 html 代码，以便将它们合并到一个页面中以便于阅读。 也就是说，我想将鼠标悬停在第一行，等待图层渲染，复制并保存div元素，然后将鼠标移动到下一行，等待图层用这个新行渲染， ...重复直到所有行都完成。
伪代码staticOverlayDetails函数：
function staticOverlayDetails (rown) {
//step 1:generate html text structure for the row, but leaves an element blank, this element is a text description for the row. the text will be loaded from a txt file
...
...
// html_text contains an `div` for description text which is currently empty, the text need to be fetched from a text file url, the text file name is based on the content of row. for the purpose of when the text is fetched, the callingback function need to know where to insert and avoid insert wrongly ( if the mouse has already moved to another row, the layer is showing details of another row, so the description text mismatch), so here it set a random string as the unique id of the description `div`, so later the `insert` function can use the id string as selector to insert text.
description_selector = random_id
html_text= html_code_generated
//step 2:
// this function fetches a , setting a callback function `insert` to insert the content.
url=generate text file url from row content
load_description( url, description_selector )
//step 3: present html
$(fixed-layer).html(txt)
//at this time , the description div is blank. the callback function will insert content into div when fetched.
}
function load_description (url, description_selector) {
function insert ( descrp_text ) {
$(description_selector).html(descrp_text).hide.slide_down()
}
$.get(url, insert, 'text')
}
我的计划是遍历rown以更改固定层，然后转储固定层：
for ( i=0; i < row_counts ; i++ ){
staticOverlayDetails(i)
console.log($(fixed_layer_selector).html())
但是异步$.get()调用使这种尝试变得不可能。 因为只有当insert函数完成时，层中的内容是稳定的，可以转储了，如果我使用这个循环，当$.get返回时，表示层已经在显示后面的层了，我不知道该如何等待。
如何让我的代码等待$.get()的回调函数完成，以便我可以保存该行的完整详细信息，然后继续循环下一行？
根据link，我尝试在同步功能中修改$.get请求load_content_for_an_element：
function load_description (url, description_selector) {
function insert ( descrp_text ) {
$(description_selector).html(descrp_text).hide.slide_down()
}
$.get({url:url, success:insert, sync:false});
}
但是浏览器向https://host.address/[object%20Object]发出请求，并返回 404 错误。 似乎它将传递的对象转换为字符串，然后将其视为要获取的 URL。
一些附加信息：
1，因为这个项目有几个表，每个表都有不同的渲染逻辑，所以我想使更改尽可能小，这就是为什么我想转储生成的表示层而不是更改生成代码本身。 所有不同的表都呈现相同的图层，这是最简单的方法。
2、我想转储代码生成页面来读取，只需要转储一次，所以不用担心性能。 其实我可以用鼠标宏来做，但我觉得那太笨了，我想学习javascript的方式来做:)
很抱歉我的英语不好，我想表达这样一个复杂的情况，所以如果我的话不清楚，请询问更多信息，我很抱歉看到其他人因为我的错误单词而浪费时间......
承诺是你的朋友。下面是如何构建代码以使用它们的示例：
// Set up a staging area
var staticOverlays = [];
loadStaticOverlayDetails(index) {
return $.get(url, insert, data....).then(function (data) {
staticOverlays[index] = data;
});
}
// Request your data
var promises = [];
for ( var i=0; i < 100; i++ ) {
promises.push(loadStaticOverlayDetails(i));
}
// Wait for the data to complete loading
$.when(promises).then(function insert() {
for ( i=0; i < staticOverlays.length; i++ ) {
var overlay = staticOverlays[i];
// step 1:generate html text structure for the row, but leaves an element blank
var txt = html_code_generated
// insert data into element in fixed layer;
$(fixed-layer).html(txt);
}
});
顺便说一句，如果你真的发出 100+ http 请求，你应该考虑将其中一些逻辑移动到服务器，因为许多 http 请求会损害你的用户体验......