Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21302 > unrolled thread

Suspending the flow of JS/ES execution

Back to article view | Back to comp.lang.javascript

Contents

  Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-12 13:53 -0600
    Re: Suspending the flow of JS/ES execution Daniel Pitts <newsgroup.nospam@virtualinfinity.net> - 2013-09-12 13:12 -0700
      Re: Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-12 15:00 -0600
        Re: Suspending the flow of JS/ES execution JJ <duh@nah.meh> - 2013-09-13 04:53 +0700
          Re: Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-12 18:42 -0600
          Re: Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-13 09:09 -0600
            Re: Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-13 10:11 -0600
              Re: Suspending the flow of JS/ES execution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-09-13 13:07 -0600

#21302 — Suspending the flow of JS/ES execution

Hi:

    I have the following JS/ES code:

    function somefunc() {
        // next line does a lot of work
        MyNewAlert(cmsg) ;
        // I want to stop execution here *until*
        // my new alert function has finihed its work and returned

        // that is, do not execute the next function until everrything
        // is completed up to here

        someobj.focus() ;

        return ;
    }


    Hope someone can tell me what to do to suspend the flow of JS/ES 
execution until my new function is completed.

Thanks for some guidance on this.

--
Mel Smith

[toc] | [next] | [standalone]

#21303

On 9/12/13 12:53 PM, Mel Smith wrote:
> Hi:
>
>      I have the following JS/ES code:
>
>      function somefunc() {
>          // next line does a lot of work
>          MyNewAlert(cmsg) ;
>          // I want to stop execution here *until*
>          // my new alert function has finihed its work and returned
>
>          // that is, do not execute the next function until everrything
>          // is completed up to here
>
>          someobj.focus() ;
>
>          return ;
>      }
>
>
>      Hope someone can tell me what to do to suspend the flow of JS/ES
> execution until my new function is completed.
>
> Thanks for some guidance on this.
>
> --
> Mel Smith
>
>

Unless MyNewAlert goes out of its way to do something asynchronously, 
you've already got that.

If that is the case, you'll need to rely on callbacks.

[toc] | [prev] | [next] | [standalone]

#21304

Daniel said:
> Unless MyNewAlert goes out of its way to do something asynchronously, 
> you've already got that.
>
> If that is the case, you'll need to rely on callbacks.
>

Hi Daniel:

    Below is the body of my new alert function called Alert()    -- note the 
capitalized 'A'  so I still have the regular alert() available.

    Also, I've been experimenting with setTimeout() and setInterval(and gotr 
deeper into trouble :(

    Hope you can suggest some code that will stop further execution until 
the new Alert() function is complete and the 'OK' button is clicked.

    btw, I don't *think* I went out of my way to do something asynchronously 
... ???

Thanks,

-Mel Smith

****** here's the code -- please don't throw up on it *******
var alertinit = false;   // build new Alert on first call
var alertinps,nalertinps,alertdisables ;

function Alert(cmsg) {
var i,alertobj,capobj,msgobj,okobj ;
var inpobj ;
alertinps = document.getElementsByTagName("input") ;
nalertinps = alertinps.length ;
alertdisables = [] ;

for (i=0;i<nalertinps;i++) {
   inpobj = alertinps[i] ;
   if (inpobj.hidden) continue ;
   if (inpobj.disabled) alertdisables.push(i.toString()) ;
   if (inpobj.id && inpobj.id == "ialertokbutt") continue ;
   inpobj.disabled = true ;
   }

if (!alertinit) {  // then create the alert box
   var alertdiv = document.createElement("div") ;
   alertdiv.id = "ialert" ;
   alertdiv.style.display = "none" ;
   alertdiv.innerHTML =
    '<p id="ialertcaption"></p>' +
    '<p id="ialertmsg"></p>' +
    '<br />' +
    '<div id="ialertok">' +
    '<input type="button" id="ialertokbutt" onclick="AlertFin();" value="OK" 
/> ' +
    '</div>'

   var containobj = getobj("container") ;
   containobj.appendChild(alertdiv) ;
   alertinit = true; // use it from now on
   }

alertobj = getobj("ialert") ;

// now set the style for the main alert box
alertobj.style.position = "absolute" ;
alertobj.style.top = "30%" ;
alertobj.style.left = "25%" ;
alertobj.style.height = "40%" ;
alertobj.style.width = "50%" ;
alertobj.style.marginTop = "0px" ;
alertobj.style.marginBottom = "0px" ;
alertobj.style.padding = "0px" ;
alertobj.style.zIndex = "1000" ;
alertobj.style.overflow = "auto" ;
alertobj.style.textAlign = "center" ;
alertobj.style.color = "black" ;
alertobj.style.background = "lightgray" ;
alertobj.style.border = "2px solid black" ;

// now set styling for the alert caption
capobj = getobj("ialertcaption") ;
capobj.style.position = "absolute" ;
capobj.style.top = "0%" ;
capobj.style.height = "12%" ;
capobj.style.marginTop = "0px" ;
capobj.style.marginBottom = "0px" ;
capobj.style.padding = "0px" ;
capobj.style.left = "0%" ;
capobj.style.width = "100%" ;
capobj.style.textAlign = "center" ;
capobj.style.fontWeight = "bolder" ;
capobj.style.textDecoration = "underline" ;
capobj.style.color = "black" ;
capobj.style.background = "yellow" ;
capobj.innerHTML = "&nbsp;Please Read Message Below, then Click 'OK'&nbsp;" 
;

// now prepare and display the message
msgobj = getobj("ialertmsg") ;
msgobj.style.position = "absolute" ;
msgobj.style.top = "20%" ;
msgobj.style.left = "0%" ;
msgobj.style.width = "100%" ;
msgobj.style.marginTop = "0px" ;
msgobj.style.marginBottom = "0px";
msgobj.style.padding = "0px";
msgobj.style.textAlign = "center" ;

// re-format with <br /> replacing '~' chars, etc
cmsg = cmsg.replace(/~/g,"<br />") ;

msgobj.innerHTML = cmsg ;

// now place the 'OK' button a bit up from the bottom of my standard Alert 
Box
okobj = getobj("ialertok") ;
okobj.style.position = "absolute" ;
okobj.style.bottom = "5%" ;
okobj.style.left = "45%" ;
okobj.style.width = "10%" ;
okobj.style.marginTop = "0px" ;
okobj.style.marginBottom = "0px";
okobj.style.padding = "0px";
okobj.style.textAlign = "center" ;


alertobj.style.display="block" ;
getobj("ialertokbutt").focus() ;

// now somehow I have to stop execution flow past my alert box ???
}

function AlertFin() {
var i,j ;
var lexit ;
var nlendisables = alertdisables.length ;
var alertobj = getobj("ialert") ;
alertobj.style.display = "none" ;
for (i=0;i<nalertinps;i++) {
   lexit = false ;
   inpobj = alertinps[i] ;
   if (nlendisables > 0 ) {
      for (j=0;j<nlendisables;j++) {
         if (alertdisables[j] === i.toString()) {
            lexit = true ;
            break ;
            }
         }
      if (lexit) continue ;
      }
   inpobj.disabled = false ;
   }
alertinps = null ;
nalertinps = 0 ;
alertdisables = null ;
return ;
}

****************************

[toc] | [prev] | [next] | [standalone]

#21308

On Thu, 12 Sep 2013 15:00:15 -0600, Mel Smith wrote:
>     btw, I don't *think* I went out of my way to do something asynchronously 

No you don't. But our Alert function merely add a new element into the
document then returned. Its job is done as it should. What you need to do is
to move the codes after the "Alert(...)" execution into a callback function.
That callback should be called after AlertFin is executed. The flow should
be like this:

Alert > (idle) > AlertFin > callback


So first, convert the code after calling the "Alert(...)", into a callback
function:

function alertCallback() {
  someobj.focus();
}

function somefunc() {
  Alert(cmsg, alertCallback);
  return;
}

Then change the Alert definition to this:

function Alert(cmsg, callback)

Then in the Alert function, change the INPUT HTML code to:

<input type="button" id="ialertokbutt" value="OK" />

Still in the Alert function, append this lines:

getobj("ialertokbutt").onclick = function() {
  AlertFin();
  if (callback) {
    //note: type checking of "callback" parameter is absent
    callback();
  }
}

[toc] | [prev] | [next] | [standalone]

#21312

JJ said:

> No you don't. But our Alert function merely add a new element into the
> document then returned. Its job is done as it should. What you need to do 
> is
> to move the codes after the "Alert(...)" execution into a callback 
> function.
> That callback should be called after AlertFin is executed. The flow should
> be like this:
>
> Alert > (idle) > AlertFin > callback
>
>
> So first, convert the code after calling the "Alert(...)", into a callback
> function:
>
> function alertCallback() {
>  someobj.focus();
> }
>
> function somefunc() {
>  Alert(cmsg, alertCallback);
>  return;
> }
>
> Then change the Alert definition to this:
>
> function Alert(cmsg, callback)
>
> Then in the Alert function, change the INPUT HTML code to:
>
> <input type="button" id="ialertokbutt" value="OK" />
>
> Still in the Alert function, append this lines:
>
> getobj("ialertokbutt").onclick = function() {
>  AlertFin();
>  if (callback) {
>    //note: type checking of "callback" parameter is absent
>    callback();
>  }
>

Hi  JJ:

    I will try to absorb what you suggested tomorrow.   My brain is old and 
filled and now tired tonite :(

Thank you for the suggestions !

-Mel

[toc] | [prev] | [next] | [standalone]

#21325

JJ said:

> ..... What you need to do is
> to move the codes after the "Alert(...)" execution into a callback 
> function.
> That callback should be called after AlertFin is executed. The flow should
> be like this:
>
> Alert > (idle) > AlertFin > callback
>
>
> So first, convert the code after calling the "Alert(...)", into a callback
> function:
>
> function alertCallback() {
>  someobj.focus();
> }
>
> function somefunc() {
>  Alert(cmsg, alertCallback);
>  return;
> }
>
> Then change the Alert definition to this:
>
> function Alert(cmsg, callback)
>
> Then in the Alert function, change the INPUT HTML code to:
>
> <input type="button" id="ialertokbutt" value="OK" />
>
> Still in the Alert function, append this lines:
>
> getobj("ialertokbutt").onclick = function() {
>  AlertFin();
>  if (callback) {
>    //note: type checking of "callback" parameter is absent
>    callback();
>  }
> }

Hi JJ:

    It works perfectly.

Thank you very much for the info on Callbacks !

-Mel Smith

[toc] | [prev] | [next] | [standalone]

#21328

Hi JJ (& others):

JJ said:
>> function somefunc() {
>>  Alert(cmsg, alertCallback);
>>  return;
>> }

    In the fragment above I would like to pass an argument to the 
alertCallback() function, and in the Alert() function access thos arguments

    In one particular instance, I need to pass a scoped variable (an object) 
to the call back function.

    In a general situation, how do I pass one value (or an array of values) 
to this alertCallback function.

Thanks for an additional kick !

-Mel

[toc] | [prev] | [next] | [standalone]

#21331

I wrote:

> JJ said:
>>> function somefunc() {
>>>  Alert(cmsg, alertCallback);
>>>  return;
>>> }
>
>    In the fragment above I would like to pass an argument to the 
> alertCallback() function, and in the Alert() function access thos 
> arguments
>
>    In one particular instance, I need to pass a scoped variable (an 
> object) to the call back function.
>
>    In a general situation, how do I pass one value (or an array of values) 
> to this alertCallback function.
>
> Thanks for an additional kick !

I gaved myself a kick. Below is my latest ES/Js for my new Alert() function:

I welcome better code suggestions from all:

-Mel

*********** alert.js *********
var alertinit = false;   // make alert box on first call only
var alertinps,nalertinps,alertdisables ;

function Alert(cmsg,callback,acallparm) {
// have an additional parm to the Alert() call:
// This acallparm is an array of  'actions' and 'objects':
// parm[0] is an action : e.g., "focus", "submit", etc
// parm[1] is an object for the action to 'work on'

var i,alertobj,capobj,msgobj,okobj ;
var inpobj,okbuttobj ;
alertinps = document.getElementsByTagName("input") ;
nalertinps = alertinps.length ;
alertdisables = [] ;

for (i=0;i<nalertinps;i++) {
   inpobj = alertinps[i] ;
   if (inpobj.hidden) continue ;
   if (inpobj.disabled) alertdisables.push(i.toString()) ;
   if (inpobj.id && inpobj.id == "ialertokbutt") continue ;
   inpobj.disabled = true ;
   }

if (!alertinit) {  // then create the alert box
   var alertdiv = document.createElement("div") ;
   alertdiv.id = "ialert" ;
   alertdiv.style.display = "none" ;
   alertdiv.innerHTML =
    '<p id="ialertcaption"></p>' +
    '<p id="ialertmsg"></p>' +
    '<br />' +
    '<div id="ialertok">' +
    '<input type="button" id="ialertokbutt" value="OK" /> ' +
    '</div>'

   var containobj = getobj("container") ;
   containobj.appendChild(alertdiv) ;
   alertinit = true; // use it from now on
   }

alertobj = getobj("ialert") ;

// now set the style for the main alert box
alertobj.style.position = "absolute" ;
alertobj.style.top = "30%" ;
alertobj.style.left = "25%" ;
alertobj.style.height = "40%" ;
alertobj.style.width = "50%" ;
alertobj.style.marginTop = "0px" ;
alertobj.style.marginBottom = "0px" ;
alertobj.style.padding = "0px" ;
alertobj.style.zIndex = "1000" ;
alertobj.style.overflow = "auto" ;
alertobj.style.textAlign = "center" ;
alertobj.style.color = "black" ;
alertobj.style.background = "lightgray" ;
alertobj.style.border = "2px solid black" ;

// now set styling for the alert caption
capobj = getobj("ialertcaption") ;
capobj.style.position = "absolute" ;
capobj.style.top = "0%" ;
capobj.style.height = "12%" ;
capobj.style.marginTop = "0px" ;
capobj.style.marginBottom = "0px" ;
capobj.style.padding = "0px" ;
capobj.style.left = "0%" ;
capobj.style.width = "100%" ;
capobj.style.textAlign = "center" ;
capobj.style.fontWeight = "bolder" ;
capobj.style.textDecoration = "underline" ;
capobj.style.color = "black" ;
capobj.style.background = "yellow" ;
capobj.innerHTML = "&nbsp;Please Read Message Below, then Click 'OK'&nbsp;" 
;

// now prepare and display the message
msgobj = getobj("ialertmsg") ;
msgobj.style.position = "absolute" ;
msgobj.style.top = "20%" ;
msgobj.style.left = "0%" ;
msgobj.style.width = "100%" ;
msgobj.style.marginTop = "0px" ;
msgobj.style.marginBottom = "0px";
msgobj.style.padding = "0px";
msgobj.style.textAlign = "center" ;

// re-format with <br /> replacing '~' chars, etc
cmsg = cmsg.replace(/~/g,"<br />") ;

msgobj.innerHTML = cmsg ;

// now place the 'OK' button a bit up from the bottom of my standard Alert 
Box
okobj = getobj("ialertok") ;
okobj.style.position = "absolute" ;
okobj.style.bottom = "5%" ;
okobj.style.left = "45%" ;
okobj.style.width = "10%" ;
okobj.style.marginTop = "0px" ;
okobj.style.marginBottom = "0px";
okobj.style.padding = "0px";
okobj.style.textAlign = "center" ;


alertobj.style.display="block" ;
okbuttobj = getobj("ialertokbutt") ;
okbuttobj.onclick = function() {
   AlertFin();
   if (callback) {
      // note: Check "callback" parameter here
      if (acallparm) callback(acallparm) ;
      else callback() ;
      }
   }
okbuttobj.focus() ;
}

function AlertFin() {
var i,j ;
var lexit ;
var nlendisables = alertdisables.length ;
var alertobj = getobj("ialert") ;
alertobj.style.display = "none" ;
for (i=0;i<nalertinps;i++) {
   lexit = false ;
   inpobj = alertinps[i] ;
   if (nlendisables > 0 ) {
      for (j=0;j<nlendisables;j++) {
         if (alertdisables[j] === i.toString()) {
            lexit = true ;
            break ;
            }
         }
      if (lexit) continue ;
      }
   inpobj.disabled = false ;
   }
alertinps = null ;
nalertinps = 0 ;
alertdisables = null ;
return ;
}
******* end of alert.js ******

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web