[JS] Browser raakt in infinite loop - hoe oplossen?

[Verwijderd]

Ik ben bezig met een javascript editor die een document doorzoekt op textarea's en hier een UBB-like toolbar boven hangt en een "gutter" (met regelnummers) ernaast hangt. Deze gutter maak ik mbv een extra textarea. Relevante delen van de code:

JavaScript:

function editorInit() {
  var theTextareas = document.getElementsByTagName('textarea');
  var thisTextarea, i = 0;
  
  while ((thisTextarea = theTextareas[i++])) {
    if (thisTextarea.hasClass('form-text')) {
      if (thisTextarea.id == '') {
        thisTextarea.id = thisTextarea.name;
      }
      new textEditor(thisTextarea);
    }
  }
}

function textEditor(textarea) {
  var container = createNode('div', {'id' : textarea.name + '-txtContainer'});
  this.textarea = parent.removeChild(textarea);
  this.toolbar = this.createToolbar();
  this.gutter = this.createGutter();
  
  container.appendChild(this.toolbar);
  container.appendChild(this.gutter);
  container.appendChild(this.textarea);
}

Object.extend(textEditor.prototype, {
  createGutter : function() {
    var target = this.textarea;  
    gutter = createNode('textarea', {'id' : target.name + '-gutter'}); 
    return gutter;
  }
}

Regel 22 veroorzaakt alle ellende. Omdat ik hier een textarea aan de DOM toevoeg, raakt de loop uit regel 5 - 12 in een oneindige loop en bevriest mijn browser. Toch heb ik de gutter-textarea nodig. Hoe kan ik hier omheen werken?

[frickY]

Je hoogt i niet op in de while-loop vanaf regel 5? Je klooit continue bij hetzelfde textarea.
He toevoegen van een textarea heeft ook helemaal geen invloed op je call naar getElementsByTagname, die is dan al lang gedaan en heeft ijn resultaat al terug gegeven.

Sowieso zou ik gebruikmaken van een for-loop

code:

for(i = 0; i < theTextareas.length; i++) {
   thisTextarea = theTextareas[i];
   [...]
}

[ Voor 57% gewijzigd door frickY op 05-01-2008 13:21 ]

[Verwijderd]

frickY schreef op zaterdag 05 januari 2008 @ 13:20:
Je hoogt i niet op in de while-loop vanaf regel 5? Je klooit continue bij hetzelfde textarea.

Nee hoor, een while loop verhoogt i wel (plaats maar eens een alert(i) in de loop). Ik klooi dus telkens bij een andere textarea.

He toevoegen van een textarea heeft ook helemaal geen invloed op je call naar getElementsByTagname, die is dan al lang gedaan en heeft ijn resultaat al terug gegeven.

Als dat zo is, waarom raakt 'ie dan in een infinite loop?

Sowieso zou ik gebruikmaken van een for-loop

code:

for(i = 0; i < theTextareas.length; i++) {
   thisTextarea = theTextareas[i];
   [...]
}

Dat kan ook, maar de werking is hetzelfde als van een while loop, imho

[Verwijderd]

Verwijderd schreef op zaterdag 05 januari 2008 @ 13:44:
Als dat zo is, waarom raakt 'ie dan in een infinite loop?

Geen idee, maar frickY heeft wel gelijk dat het niet uitmaakt als er textarea's worden toegevoegd, wanneer de getElementsByTagName al is uitgevoerd.

Weet je zeker dat de loop optreedt door regel 22?

[crisp]

getElementsByTagName geeft een 'live nodelist' terug, dus de extra textarea wordt daar wel degelijk aan toegevoegd!

Wat je dus moet doen is eerst het resultaat van getElementsByTagName statisch maken:

JavaScript:

function editorInit() {
  var textareaNodes = document.getElementsByTagName('textarea');

  var theTextareas = [], thisTextarea, i = 0;
  while ((thisTextarea = textareaNodes[i++]))
    theTextareas.push(thisTextarea);

 i = 0; 
  while ((thisTextarea = theTextareas[i++])) {
    if (thisTextarea.hasClass('form-text')) {
      if (thisTextarea.id == '') {
        thisTextarea.id = thisTextarea.name;
      }
      new textEditor(thisTextarea);
    }
  }
} 

Dit kan ook, maar werkt alleen niet in IE:

JavaScript:

var theTextareas = [].slice.call(document.getElementsByTagName('textarea'), 0);

[Verwijderd]

@crisp - thanks!

...en die IE oplossing had ik natuurlijk zelf ook al lang gevonden

[Verwijderd]

crisp schreef op zaterdag 05 januari 2008 @ 14:11:
getElementsByTagName geeft een 'live nodelist' terug, dus de extra textarea wordt daar wel degelijk aan toegevoegd!

Wauw, dat wist ik niet! Onbegrijpelijk dat ik hier nog nooit eerder last van heb gehad.

Dit opent trouwens wel prachtige mogelijkheden .

Kun je trouwens ook niet gewoon nog een keer i++ toevoegen na de regel

JavaScript:

new textEditor(thisTextarea);

? Dan spring je over de gutter/nieuwe textarea heen.

[ Voor 3% gewijzigd door Verwijderd op 05-01-2008 14:50 ]