jQuery：提高就绪事件期间的感知响应能力

发布于 2024-08-03 04:34:35 字数 603 浏览 3 评论 0原文

在文档就绪时启动代码是 jQuery 的支柱。
但有时，会在就绪事件内执行冗长的操作。
- 例如，将多个轮播实例附加到冗长的无序列表将需要一些时间。

问题：

如何提高就绪事件期间的感知响应能力？

例如：

我可以弹出带有“你知道吗？”的 thickbox 实例吗？隐藏底层 DOM 操作的部分？
- ...然后在就绪事件完成时自动关闭该thickbox实例？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

∞梦里开花 2024-08-10 04:34:35

您向用户提供的每一个反馈都会带来更好的感知响应能力。加载图像是经典的 - 并且众所周知（即与用户思维模型一致）。厚盒本身可能相当烦人 - 但如果将其与加载消息结合起来，正如游戏行业中的大多数人已经发现的那样，通过同时教育用户和提供反馈，它将产生更好的结果。

[编辑]

类似这样的东西：

$(function() {
    tb_show(caption, url, imageGroup); // show thickbox

    /* lengthy operation here */

    tb_remove(); // remove thickbox
});

[/编辑]

Every feedback that you give to the user will result in better perceived responsiveness. A loading image is classic - and well known (i.e. consistent with the user mind model). The thickbox may be rather annoying by itself - but if you combine it with a loading message, as most people in the game industry have already discovered, it will yield much better results by simultaneously educating the user and providing feedback.

[edit]

Something like this:

$(function() {
    tb_show(caption, url, imageGroup); // show thickbox

    /* lengthy operation here */

    tb_remove(); // remove thickbox
});

[/edit]

回复收藏 0 原文

惜醉颜 2024-08-10 04:34:35

除了进度指示器之外，您还可以使用 Javascript setTimeout 函数以非常短的超时时间并行执行多个操作。这有效地允许您在浏览器中使用多个线程，异步运行每个操作。

仅当您的操作在排序或计时方面不相互依赖时才使用此技术，并且不要一次创建太多超时，否则可能会因内存使用量增加而导致浏览器挂起。

另请注意，浏览器有一个最短超时时间，通常约为 10-20 毫秒，但不同浏览器的超时时间有所不同；它应该足够短以至于不引人注目。如果您将超时设置为 0，它将默认为浏览器的最小值。

这是轮播设置的一个简单示例，将列表分为两组：

setTimeout(function () {
    // code for attaching first carousel group
    // ...
}, 0);
setTimeout(function () {
    // code for attaching second carousel group
    // ...
}, 0);

In addition to progress indicators, you can parallelise multiple operations using the Javascript setTimeout function with a very short timeout. This effectively allows you to make use of multiple threads in the browser, running each operation asynchronously.

Only use this technique if your operations don't depend on each other for ordering or timing, and don't create too many timeouts at once or you might cause browser hangs due to increased memory usage.

Note also that browsers have a minimum timeout, usually around 10-20ms, but it varies between browsers; it should be short enough to be unnoticeable. If you set a timeout of 0, it will default to the browser minimum.

Here's a simple example for your carousel setup, splitting the lists into two groups:

setTimeout(function () {
    // code for attaching first carousel group
    // ...
}, 0);
setTimeout(function () {
    // code for attaching second carousel group
    // ...
}, 0);

回复收藏 0 原文

~没有更多了~