Question

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

文本框列表：

<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可以处理它吗？

Answer 1

属性选择器通常效率不高，因此请尝试其他方式选择所需的输入（例如，特定父级下的所有输入）。

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

即。

 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;
  }

应该更有效率。

Answer 2

尝试缓存值数组并优化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中减去一个值，因为该值是不是“falsy”，换句话说它不是0，然后循环继续。该当值达到0时，循环停止。

Answer 3

使用数据属性

<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;
});

Answer 4

马克的答案很有效。但如果你的阵列非常庞大，那么如果这也会失败。但我有一个解决方案。考虑使用单独的页面并尝试使用更多的网络技术，如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);

在超时函数中出现的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/

加速从大量文本框中获取值并存储到数组中

4 个答案: