jQuery不能以正确的顺序执行吗? [英] jQuery not executing in correct order?

问题描述

我最近开始使用jQuery，今天发现它对我的行为产生了一个奇怪的问题.据我了解，JavaScript是单线程的.因此，所有操作都应在FIFO基础上运行.但是，对我而言似乎并非如此.请考虑以下内容.

I have recently started working with jQuery and today noticed a strange issue with how it's behaving for me. As I understand it, JavaScript is single threaded. So all of it's operations should run in a FIFO basis. However, this did not appear to be the case for me. Please consider the following.

设置如下

HTML:

3 divs

• div#1 =>包含可单击以执行排序功能的标题元素

• div#1 => contains header elements which can be clicked to execute the sort function

div#2 =>包含需要排序的数据

div#2 => contains the data that needs to be sorted

div#3 =>包含一个基本的.gif，用于通知用户正在执行某些操作

div#3 => contains an basic .gif which is used to notify the user that some operation is being performed

jQuery -包含执行DOM操作的sort函数.基本上，它从HTML页面读取数据，存储在2D数组中并对数组进行排序.然后，它将使用已排序数组中的数据完全清除div#2(数据div)并重建它.

jQuery - contains the sort function which does DOM manipulation. Basically, it reads data from the HTML page, stores in a 2D array, and sorts the array. It then clears div#2 (data div) completely and rebuilds it, using data from the sorted array.

预计执行如下

• 用户单击标题之一以触发排序功能
• sort函数隐藏div#2并显示div#3
• 执行排序功能
• 排序完成后，显示div#2(数据div)，并且隐藏div#3

但是，这似乎正在发生

• 用户单击标题

• user clicks the headers

发生排序

隐藏和显示div是在最后一步

hiding and showing of divs happens at the last step

最初，由于我看不到任何显示/隐藏的div，因此我认为它的发生速度太快了，我无法注意到.因此，我在jQuery的.show()和.hide()函数中添加了时间延迟.完成此操作后，很明显，显示和隐藏操作将在最后完成.

Initially, as I was not able to see any divs being shown/hide, I assumed that it was happening too fast for me to notice. So I added a time delay to the .show() and .hide() functions of jQuery. Once this was done, it was quite apparent that show and hide actions were being done at the very end.

*解决方案* 经过大量搜索之后，我设法通过使用jQuery .queue()和.dequeue()函数来按预期工作.这里的致命弱点是我必须在每次操作之间插入1毫秒的延迟.然后，直到那时，浏览器才能够根据我的需要隐藏/显示div.因此操作如下:

* SOLUTION * After much searching, I managed to get this working as I expected by using jQuery .queue() and .dequeue() functions. The achilles heel here was that I had to insert a 1 millisecond delay between each operation. Then and only then was the browser able to hide/show divs as I wanted. So the operations went something like this:

    var theQueue = $({}); // jQuery on an empty object

theQueue.queue("testQueue",
                function( next) {
                    $("#loadingIndicator").show();
                    $("#cases").hide();
                    next();
                }
            );
theQueue.delay( 1, "testQueue" );

theQueue.queue("testQueue",
                function( next) {
                    doSort(columnNumber);  //SORT
                    next();
                }
            );
theQueue.delay( 1, "testQueue" );

theQueue.queue("testQueue",
                function( next) {
                    $("#loadingIndicator").hide();
                    $("#cases").show();
                    next();
                }
            );

theQueue.dequeue("testQueue");

}

我当然不是这方面的专家，但是我认为操作应该以与调用相同的顺序执行.浏览器的渲染顺序不正确吗? jQuery是否正在更改操作顺序以使事情更高效?

I am certainly not an expert on the matter, but I would think that operations should be executing in the same order as they are called. Is the browser not rendering in the correct order? Is jQuery changing order of operations to make things more efficient?

尽管解决方案"可以完成任务，但我不认为这是此方案中的最佳解决方案.还有其他方法吗?如果需要，我可以提供可演示此问题的有效代码示例.谢谢.

While the "solution" does the job, I am not convinced that it is the best solution in this scenario. Is there any other way to do this? If needed, I can provide working code examples that will demonstrate the issue. Thank you.

另一方面，我注意到大型数据集，当用户单击标题元素以触发排序时，浏览器变得无响应.我意识到它正在执行sort函数，但我希望有办法避免这种情况.有什么想法吗?

On a different note, I have noticed with large data sets, when user clicks on a header element to trigger sort, browser become unresponsive. I realize it is executing the sort function, but I was hoping there would be a way to avoid this. Any thoughts?

推荐答案

操作的执行顺序与调用时的顺序相同，但是问题在于DOM元素和屏幕上显示的内容是两个独立的部分.将元素呈现到屏幕的过程在与Javascript代码相同的单线程环境中运行，因此在脚本完成之前，它无法在场景上显示任何更改.

The operations are being executed in the same order that they are called, but the problem is that the DOM elements and what's shown on the screen are two separate things. The process that renders the elements to the screen runs in the same single threaded environment as the Javascript code, so it can't show any changes on the sceen until your script finishes.

要显示更改，您必须结束脚本，然后在渲染器有机会显示更改后恢复脚本.

To get the changes to show up, you have to end your script, and then resume it once the renderer has had a chance to show the changes.

您可以使用setTimeout方法将控制权返回给浏览器，并使其余代码尽快启动:

You can use the setTimeout method to return control to the browser, and get the rest of the code to start as soon as possible:

$("#loadingIndicator").show();
$("#cases").hide();

window.setTimeout(function(){

  doSort(columnNumber);  //SORT
  $("#loadingIndicator").hide();
  $("#cases").show();

}, 0);

这篇关于jQuery不能以正确的顺序执行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！