js运行时间比较长，怎么才能在它运行之前页面置灰并且有请等待的提示

Posted 2023-05-16

var merArr="";
var items = document.getElementsByName("add_mer");
Ext.getBody().mask("数据保存中，请稍等...");//这里没有起作用
//构造字符串，下面一段for循环 页面如果有一万条数据，遍历出勾选的数据比较耗时间
for ( var x = 0; x < items.length; x++)
if (items[x].checked)
merArr =merArr+Trim(items[x].value)+",";


document.getElementById("merArray").value = merArr;
if(merArr=="")
alert("请勾选!");
Ext.getBody().unmask();
return false;

document.forms['listForm'].action = 'addGroupMer.action';
document.forms['listForm'].submit();
;
为什么Ext.getBody().mask()没起作用？怎么才能实现我想要的效果？

看得出来你不太懂 JS，先把代码给你，做了很多注释，先仔细看看，然后后面讲解为什么：

// 检查表单的函数
function checkForm() 
/** @type string 数据容器 */
var merArr="";

/** @type number 局部循环指针 */
var p=0;

/** @type Array.<Element> 获取待提交的表单元素 */
var items = document.getElementsByName("add_mer");

// 遮罩
Ext.getBody().mask("数据保存中，请稍等..."); //这里没有起作用

// 开始检查
doCheck();


function doCheck()
/**
 * 循环构造字符串
 * 为了避免长时间阻塞，每一段仅允许循环 100 次
 * 如果一次不能完成，则分组完成
 */
for(var i=0; i<100 && p<items.length; i++, p++) 
if (items[x].checked) 
merArr =merArr+Trim(items[x].value)+",";


// 如果循环结束
if (p === items.length) complete();
// 如果循环没有完成，则用 setTimeout 交出控制权，延迟循环
else setTimeout(doCheck, 1);


// 检查结束，真正的处理表单
function complete()
document.getElementById("merArray").value = merArr;
if(merArr=="")
alert("请勾选!");
Ext.getBody().unmask();
return false;

document.forms['listForm'].action = 'addGroupMer.action';
document.forms['listForm'].submit();


return false;

下面是讲解：

1、 JS 是阻塞式的。在一个 JS 函数正在执行的时候，对 DOM 的渲染其实对于用户来说是不可见的。也就是说，你在一个 JS 循环中不论对 DOM 做了什么，用户都是看不到中间过程，只能看到一个最终的结果。

2、 所以，上面代码的核心是，把耗时特别长的操作部分，使用 setTimeout 延迟。 setTimeout 可以把控制权还给浏览器，留出足够的页面渲染时间。

3、 setTimeout 的过程中，要注意变量的处理。对于闭包的应用是一个需要注意的地方。

以上，请采纳，请给分。

参考技术A 我用的是artDialog组件

js 页面滚动到指定位置

  当页面的长度比较长时，如果进行刷新页面，我们希望能够在刷新完成页面之后，能够停留在当前位置，而不是从头再手动滚动到当前位置。

那么这样的效果如何实现呢？下面开始简单描写（由于博客园不支持效果展示，所以效果自行复制代码，运行查看咯）

 

页面长度很长很长很长   
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长
页面长度很长很长很长页面长度很长很长很长

停留在当前位置


刷新查看效果呗

js方法
//
//两种方案
  function reloadStay()
   
     var href = window.location.href;
     window.parent.location.href = href + "#current";
     window.parent.location.reload();