0

我正在编写一个网页，其中包含大量文本框，这些文本框填充在服务器端。在页面加载时，我需要从文本框中获取所有值并将它们存储在一个数组中。目前我正在这样做：

文本框列表：

<input name="hdnID" type="hidden">256<input>
<input name="hdnCode" type="hidden">XXXXX<input>
<input name="hdnName" type="hidden">Name 1<input>
<input name="hdnID" type="hidden">257<input>
<input name="hdnCode" type="hidden">XXXXY<input>
<input name="hdnName" type="hidden">Name 2<input>
...

JavaScript/Jquery：

  var count = $('[name=hdnCode]').length;
  var arrItems = new Array();

  for (i=0; i < count; i++)
  {
      var joItem = {
              "itemID"       : $('[name=hdnID]')[i].value,
              "itemCode"     : $('[name=hdnCode]')[i].value,
              "itemName"     : $('[name=hdnName]')[i].value
          };

    arrItems[i] = joItem;
  }

目前我的页面上有 1045 个项目，导致 3135 个文本框！在 IE8 上，我收到一个弹出窗口，上面写着“停止运行此脚本？页面上的脚本导致 Internet Explorer 运行缓慢..”。任何人都可以想出一种方法来加快速度或提高效率，以便 IE 8 可以处理它吗？

4

4 回答 4

2

属性选择器通常效率不高，因此请尝试一些其他方式来选择您想要的输入（例如，特定父项下的所有输入）。

此外，您没有缓存选择的结果，因此它必须一遍又一遍地进行。

IE

 var hdnIDs =  $('[name=hdnID]');
 var hdnCodes = $('[name=hdnCode]');
 var hdnNames = $('[name=hdnName]');
 var count = hdnCodes.length; 
 for (i=0; i < count; i++)
  {
      var joItem = {
              "itemID"       : hdnIDs[i].value,
              "itemCode"     : hdnCodes[i].value,
              "itemName"     : hdnNames[i].value
      };

      arrItems[i] = joItem;
  }

应该更有效率。

于 2013-04-04T07:58:50.900 回答
0

尝试缓存值数组并优化你的 for 循环：

var count = $('[name=hdnCode]').length,
    allID = $('[name=hdnID]'),
    allCode = $('[name=hdnCode]'),
    allName = $('[name=hdnName]'),
    arrItems = new Array();

for ( var i = count; i--; ) {

    var joItem = {
        "itemID"       : allID[i].value,
        "itemCode"     : allCode[i].value,
        "itemName"     : allName[i].value
    };

    arrItems[i] = joItem;
}

来自http://www.phpied.com/extreme-javascript-optimization/：

这个循环的执行速度将提高 50%，因为在每次迭代中它只是从 i 中减去一个值，并且由于该值不是“假的”，换句话说它不是 0，因此循环继续。当值达到 0 时，循环停止。

于 2013-04-04T07:58:50.927 回答
0

使用数据属性

<input name="hdnID" type="hidden" data-inpname="itemID">256<input>
<input name="hdnCode" type="hidden" data-inpname="itemCode">XXXXX<input>

试试这个

var arrItems ={};
$('input').each(function(i,v){
    var $this=$(this), 
        name=$this.data('inpname');
        value=$this.val(); 

    arrItems.name=value;
});
于 2013-04-04T07:59:02.587 回答
0

马克的回答是有效的。但是，如果你的数组非常大，那也会失败。但我有一个解决方案。考虑有单独的页面并尝试使用更多的网络技术，如 localstorage、ajax 等，

试试这个代码

var hdnIDs =  $('[name=hdnID]');
var hdnCodes = $('[name=hdnCode]');
var hdnNames = $('[name=hdnName]');
var hdnIDsDup = hdnIDs.concat();
var hdnCodesDup = hdnCodes.concat();
var hdnNamesDup = hdnNames.concat();


function process(hdnIDs,hdnCodes,hdnNames){
        var joItem = {
              "itemID"       : hdnIDs.value,
              "itemCode"     : hdnCodes.value,
              "itemName"     : hdnNames.value
      };
      arrItems[i] = joItem;
   }


 setTimeout(function(){

    var start = +new Date();

    do {
         process.call(context, hdnIDsDup.shift(),hdnCodesDup.shift(),hdnNamesDup.shift());
    } while (hdnCodesDup.length > 0 && (+new Date() - start < 50));

    if (hdnCodesDup.length > 0){
        setTimeout(arguments.callee, 25);
    } else {
        callback(array);
    }
}, 25);

timeout 函数中的 do while 循环将执行几毫秒，如果我们正在处理的数组中存在任何元素，则第二次超时确保再次循环。

您可以在以下链接中找到有关此方法的更多详细信息。 http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/ http://www.nczonline.net/blog/2009/08/ 11/timed-array-processing-in-javascript/

于 2013-04-04T08:20:20.660 回答