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

Speeding up getting values from a large number of text boxes and storing into an array

本文关键字：存储 数组 速度 获取 文本      更新时间：2023-09-26

我正在写一个网页，其中有一个巨大的列表的文本框填充服务器端。在页面加载时，我需要从文本框中获取所有值并将它们存储在一个数组中。目前我是这样做的:

文本框列表:

<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上，我得到一个弹出框，说"停止运行此脚本?页面上的脚本导致ie运行缓慢…"有没有人能想到一种方法能让我加快速度或者让它更有效率，这样ie8就能处理了?

属性选择器通常不是那么有效，所以尝试其他方法来选择你想要的输入(例如，在特定父节点下的所有输入)。

你也没有缓存选择的结果，所以它必须一遍又一遍地做。

。

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

应该更有效率

尝试缓存值数组并优化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中减去一个值，因为这个值是不是"false"，换句话说，它不是0，然后循环继续。的当该值达到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;
});

马克的回答很有效率。但如果你的数组非常大，那也会失败。但我有个解决办法。一定要考虑单独的页面，并尝试使用更多的web技术，如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循环将执行毫秒级，第二个timeout确保在我们正在处理的数组中存在更多元素时再次循环。

你可以在下面的链接中找到关于这个方法的更多细节。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/

相关文章：