JavaScript - JavaScript DoEvents??? - Asked By Robbe Morris on 04-Dec-01 03:22 PM

I'm in need of some help with the following JavaScript. 
I think my problem is fairly simple...

Essentially, I have a bunch of hidden DIV tags in the page
when it loads.  I then have a tree on the left side that
the user clicks nodes to show a specific DIV tag on the right.  
Of course,  we'd want to hide all other "like" DIV tags before 
showing this.  I also change the link color of the node in the 
tree to indicate which node has just been clicked and unselect 
all other nodes.

This functionality works fine.  In fact, its pretty slick...

However, the process for unselecting nodes in the tree and hiding the DIV tags takes upwards of 3-5 seconds (quite a few of each...).  I'd like to display a Working DIV tag while the unselection process is taking place.  Then hide the Working DIV tag just before showing the proper one.

My problem is that JavaScript doesn't seem to render the
DIV tag changes and refresh to the screen before the
unselection process takes place.  Almost like a VB
app with no DoEvents.

This does need to be cross browser.  I've taken out
the Netscape layer differences to simplify the text
in this forum post.

Any ideas on what I can do to get around this?



function UnSelectTreeNodes() 
  { 
     var oCtrl; 
     var sCtrl=''; 
     var sCtrlTmp='';
     for (oCtrl in document.all.tags('A'))
      { 
            sCtrl = new String(oCtrl);
            sCtrlTmp = '|' + sCtrl; //ensures the string has at least one character to avoid errors.
            if (sCtrlTmp.indexOf('cTree_') > 0)   {   document.getElementById(sCtrl).style.color = '#000000';  }
	    if (sCtrlTmp.indexOf('msTree_') > 0)  {   document.getElementById(sCtrl).style.color = '#507FC7';  }
      } 
   } 

  function SelectTreeNode(sID) 
  { 
      UnSelectTreeNodes();    
      document.getElementById(sID).style.color = 'red'; 
   }

function HideNodePages() 
  { 
     var oCtrl; 
     var sCtrl=''; 
     var sCtrlTmp='';
     for (oCtrl in document.all.tags('DIV'))
      { 
            sCtrl = new String(oCtrl);
            sCtrlTmp = '|' + sCtrl;   //ensures the string has at least one character to avoid errors.
            if (sCtrlTmp.indexOf('divNode_') > 0) 
                { document.getElementById(sCtrl).style.visibility = 'hidden';  }
      } 
   } 


// My problem occurs in the ShowNode function.  If I comment out the
// HideNodePages and SelectTreeNode functions, the Working tag
// displays properly.  

function ShowNode(sID) 
{ 
     document.getElementById('divWorking').style.visibility = 'visible';  
     HideNodePages();
     SelectTreeNode('msTree_' + sID); 
     document.getElementById('divWorking').style.visibility = 'hidden';   
     document.getElementById('divNode_' + sID).style.visibility = 'visible'; 
}

I don't know what the purpose, but in your unselect function
you seem to be doing a lot of unneccesary string creation and indexOf testing, e.g.:
sCtrl = new String(oCtrl);
sCtrlTmp = '|' + sCtrl; //ensures the string has at least one character to avoid errors.
if (sCtrlTmp.indexOf('cTree_') > 0)   {   document.getElementById(sCtrl).style.color = '#000000';  }
if (sCtrlTmp.indexOf('msTree_') > 0)  {   document.getElementById(sCtrl).style.color = '#507FC7';  }
An approach that might be a lot faster would be to simply set (or add) an attribute say, "selected='true'" on any element that has been selected and then you can simply iterate the nodelist looking for elements with the correct attribute and perform your style.visibility change, instead of creating a whole new set of objects
[[ sCtrl = new String(oCtrl);
sCtrlTmp = '|' + sCtrl; //ensures the string
]]
for every node just so you can perform your test. In other words, perform whatever test you need on the DOM objects that are already there, don't create new ones.
(use the getAttribute and setAttribute methods)

As suggested by someone else, I opted to just keep track of the last node selected and reset it .v iterating through all the nodes again and again.

Was a whole lot faster.  I'm still curious as to
why the Working DIV wouldn't display immediately.
This could come up again in the future...Oh well,
I'll hunt that one down when the time comes.

And what I have noticed was that page is not "reshreshed" until changes to the document are finished. So I found a workaround fot it. You need to make small pause after you change|set DIV value. I wish JAvaScript had some analog of wait()... but you can use window.setTimeout() for the same purpose. It worked for me and it could work for you.