Javascript 使用回调进行排序

Question

我有几个用于对页面上的当前元素进行排序的链接。

功能：

• A - 使用数组排序的单击处理程序
• B - 根据排序的数组显示元素。

排序甚至可能需要 2 秒，所以我想向用户显示一些反馈。

我考虑过将链接文本更改为“进行中..”或类似的内容。

在乐趣中 A 存储旧链接文本并将其更改为“进行中”并将另一个函数传递给 B 我在显示元素之后调用它来显示链接的旧文本，但它不起作用。

在调试器中，链接文本已更改，但我始终只能看到旧文本。

我如何为此创建有效的回调？

我看到网站有类似的排序，但也没有向用户提供任何反馈。

这可以用javascript来做吗？或者反馈只能在ajax请求时显示？

Answer 1

问题很可能是您正在运行完全同步代码。

在您启动的任何函数完成之前，DOM 不会更新（即使您在长时间运行的计算之前更新 DOM）。

下面是一个长时间运行计算的示例，该计算会阻止 DOM 立即更新。 （单击顶部的“渲染”按钮即可正确查看示例。）

请注意，示例中出现了“正在开始...等待几秒钟。” 文本立即执行，并且不会被长时间运行的计算所阻塞。但 “Updated” 文本需要 3 秒才会出现。

这样做的原因是因为我首先将 "Starting..." 添加到 DOM，然后将其余代码包装在 setTimeout 中。这允许 DOM 立即更新“Starting...”，但 setTimeout 内的其余代码是同步的，因此在该代码完成之前 DOM 不会再次更新。

---

因此，您的解决方案可以是使用 "In Progress..." 更新文本，然后将其余代码包装在 setTimeout() 中，以允许 DOM立即更新您的进度消息。

element.innerHTML = "In progress...";

setTimeout( function() {
    // invoke the sorting code
}, 0);