- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我遇到了一个问题,试图在我的页面上有一个“加载微调器”,它在对表格进行排序时运行,特别是对于速度较慢的客户端,因为可能需要长达 10 秒的时间来对页面进行排序。我可以看到 DOM 使用微调器代码进行了修改,但它不显示。我希望我可以做些什么来在排序发生之前强制显示微调器,当然在排序完成后停止它。
我的排序是基于 'sorttable.js'我对其进行了修改以处理表第一列(其中包含名称)的二次排序。
我的微调器使用 'spin.js' .
我对这个 jQuery 东西还是个新手,这个可排序代码相当复杂。我突出显示下面的部分,但我的完整修改后的可排序代码(目前)可以在 'sorttable-TESTING-ONLY.js' 找到。在 'TESTING-ONLY-sort_and_spin.htm' 有一个测试 html 页面.
因此,脚本会在页面加载时设置一些函数(“......”表示跳过的行):
makeSortable: function(table) { //line 75
......
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) { //line 114
.....
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i); //line 126
// code to start/stop spinner
headrow[i].sorttable_spinner = (function(val) { //line 136
return function(val) {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (val > 0) {
var opts = {
.......
};
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
// can see spinner added to DOM but does not display...
}
}})(i);
编写代码为列标题创建一个可点击的事件处理程序:
headrow[i].sorttable_columnindex = i; //line 171
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", function(e) { //line 176
.... does some stuff with class names, etc
this.sorttable_spinner(1); // set spinner on //line 224
.... builds array to do sort then calls sort functions
if (sort_direction == 'forward') { //line 247
row_array.sort(this.sorttable_sortfunction);
} else {
row_array.sort(this.sorttable_reversesortfunction);
}
tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][2]);
}
delete row_array;
this.sorttable_spinner(); // now stop the spinner //line 261
这一切看起来应该可以正常工作。在带有 firebug 的 Firefox 中,我看到 DOM 加载了旋转器代码,我看到它在浏览器中旋转,关闭旋转器的行将其从 DOM 中删除。但是,如果我没有处于 Debug模式,只是运行它,那么不会显示微调器吗?(使用 IE10 调试甚至不显示微调器)。
我在不同的地方尝试过 .show() 但总是被告知没有可用的功能。看到对 window.setTimeout( function () {...
的引用以提供单独的排序过程,但无法理解在这种情况下如何实现它。
如果有人能给我一些建议,我将不胜感激。
问候,布莱斯 S.
最佳答案
基本上,JavaScript 只有一个线程用于您的代码和 UI。这意味着,如果您的代码不放弃控制权,则在您放弃控制权之前不会显示 UI。所以,在这种代码中:
spinner_on();
dostuff();
spinner_off();
发生的事情是,您将微调器插入 DOM,做一些事情,删除微调器,放弃控制 - 最后更新 UI,没有微调器(因为此时它不再存在)。
基本模式应该是这样的:
spinner_on();
setTimeout(function() {
dostuff();
spinner_off();
}, 0);
它的工作原理如下:将微调器插入 DOM,安排一些事情,放弃控制。 UI 得到更新(使用微调器)。预定函数运行:事情完成,微调器从 DOM 中移除,控制再次被放弃。 UI 已更新(没有微调器)。
当您在调试器中时,调试器会从您的代码手中夺走控制权,因此您可以在代码处于中断状态时在 UI 中看到您的微调器。
关于javascript - jQuery:强制显示修改后的dom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14227611/
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。 我的组件内部有一个可滚动区域,用于显示日志消息。 (id =“message-li
我真的很困惑 有一个 phpinfo() 输出: MySQL 支持 启用 客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化,我尝试使用以下代码: 但是,它不起作用。我应该如何实现这个?任何帮助都会很棒
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID,当看到数据时显示狗和猫的名字。 我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
我有一个字符串返回到我的 View 之一,如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是,输出是原始字符串而不是渲染
我无法让我的链接(由图像表示,位于页面左侧)真正有效地显示一个 div(包含一个句子,位于中间)/单击链接时隐藏。 这是我的代码: Practice
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
最初我使用 Listview 来显示 oracle 结果,但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而,自从切换到数据网格后,我得到的结果越来越
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽,所以它显示在 Apache FOP 生成的 PDF 中。 这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input,您
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。 我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。 我的应用程序似乎有内存泄漏,因为它从我启动时的大约 1
好的,所以我有一些 jQuery 代码,如果从下拉菜单中选择了带有前缀 Blue 的项目,它会显示一个输入框。 代码: $(function() { $('#text1').hide();
当我试图检查 Chrome 中的 html 元素时,它显示的是 LESS 文件,而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
我是 Microsoft Bot Framework 的新手,我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试执行单击以打开/关闭一个 div 的功能。 这是基本的,但是,点击只显示 div,当我点击“关闭”时,没有任何反应。 $(".inscricao-email").click(function
假设我有 2 张卡片,屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据,卡 2 上有一些数据,我不想破坏它们每个上的数据,或者我不想再次重建它们中的任何一个。
我正在使用 Eloquent Javascript 学习 Javascript。 我在 Firefox 控制台上编写了以下代码,但它返回:“ReferenceError:show() 未定义”为什么?
我正在使用 Symfony2 开发一个 web 项目,我使用 Sonata Admin 作为管理面板,一切正常,但我想要做的是,在 Sonata Admin 的仪表板菜单上,我需要显示隐藏一些菜单取决
我试图显示一个div,具体取决于从下拉列表中选择的内容。例如,如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本,但样本不完整,需要接线 http://j
我是一名优秀的程序员,十分优秀!