SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Employed Again Viflux's Avatar
    Join Date
    May 2003
    Location
    London, On.
    Posts
    1,130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looping Through Form Elements

    The Mission:

    - Loop through 10,000 input boxes and disable each one.
    - Accomplish this quickly and without freezing the browser.
    - It only *has* to work in IE6, but IE7 and FF would be nice.


    I can't seem to accomplish this with any kind of speed in IE. In Firefox, it happens quite quickly and works wonderfully. In IE, with only 100 input fields, it freezes the browser temporarily (maybe 10 seconds) while looping through.

    Based on some JS optimization tips I was reading, I've unrolled the loop and come up with the following.

    Code:
    var temp;
    var x = 0;
    
    i = parseInt( inputFields.length / 8 );
    
    do
    {
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    	inputFields[ x ].disabled = true;
    	x++;
    }
    while( --i );
    
    i = inputFields.length % 8;
    
    if( i > 0 )
    {
    	do
    	{
    		inputFields[ x ].disabled = true;
    		x++;
    		
    	}
    	while( --i );
    }
    inputFields is the result of a call to table.getElementsByTagName( "INPUT" ) where table is the table generated as the output of my DataGrid.

    Any insight would be much appreciated.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Recursion might be a better idea. Also, a for loop seems more sensible. Try this first:
    Code Javascript:
    for (var i = 0; i < inputFields.length; i++) {
      inputFields[i].disabled = true;
    }
    If IE still chokes, do it in chunks with a delay in between:
    Code Javascript:
    var l = inputFields.length;
    function disable(r) {
    var s = r + 1000;
      for (var i = r; i < s; i++) {
        if (i == l) return;
        inputFields[i].disabled = true;
      }
      if (s < l) setTimeout(function() {disable(s)}, 500); // half a second delay
      else return;
    }
    disable(0);

  3. #3
    Employed Again Viflux's Avatar
    Join Date
    May 2003
    Location
    London, On.
    Posts
    1,130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had used a for loop originally. The loop you see above is the recommended way of optimizing a for loop by unrolling it.

    As for adding a delay, would that really help?

    I'll try it, but introducing an extra 5 seconds of delay on top of the original time seems odd.

    I've done some more testing and I've found that the problem has nothing to do with the loop. If I do the same looping, but only traverse checkboxes instead of input text fields, it is lightning fast. Only when I try to disable the input boxes does it slow down.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    According to this guy's tests, the difference in speed between for and while in IE is negligible.

    I thought the problem was that the browser froze (which that link also mentions), which is why I thought that perhaps adding a delay might help somehow. IE's behaviour is so unpredictable and completely random and unexpected sometimes that stuff like that could just work.

    Sorry, besides this, I don't know what else to suggest. If IE freezes while loops are being executed, there's not a lot you can do except perhaps display a "please wait" message.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •