php - Pause JavaScript function onclick -

hi new javascript , ajax.

the idea page when user clicks appropriate area in image in map calls javascript function myfunction1 when entry in 'field_x' '0' - function updates 'field_x' '1' through ajax ('field_x' starts '0' entry).

then when user next clicks same area in map myfunction2 called because entry in 'field_x' '1' - , updates 'field_x' '2'.

and on...

the ajax call works fine , updates 'field_x' correctly when appropriate function called individually.

however problem (with code have it) when user clicks map 3 functions called in succession straight away (and 'field_x' becomes '3'). not sure how pause between functions , wait next click user.

i have abbreviated code in functions best can functions other things well. appreciated.

php user page

<?php function request_data(){select field_x table_x; }   $q = request_data(); ?>    <map>   <area onclick= <?php         if ($q == '0') {?>"myfunction1();" <?php }       if ($q == '1') {?>"myfunction2();" <?php }       if ($q == '2') {?>"myfunction3();" <?php }        if ($q == '3') { ...and on... }    ?> />   </map>   

javascript page

<script>    //javascript   function myfunction1() { update_1(); }   function myfunction2() { update_2(); }   function myfunction3() { update_3(); }    //ajax - abbreviated   function update_1(){ update table_x set field_x = (1); }   function update_2(){ update table_x set field_x = (2); }   function update_3(){ update table_x set field_x = (3); }   </script>    

you can't pause js's execution, not really... there hacky ways it, make terrible code, there no point in learning them. would, suggested in comments use global (or better: closure) variable. here's basic setup use in case:

//server side, instead of echoing function1() etc... echo 'var funcnumber = '; switch($q) {     case 0: echo 1; break;     case 1: echo 2; break;     //and on } echo ';'; //or better yet echo 'var funcnumber  = '.($q + 1).';'; 

then, in js

//var funcnmber = 1; ===> makes global var, not recommended window.onload = function() {     var funcnmber = 1;//echo here if possible     var handler = function(e)     {//assign var, you'll see why         var ajax = nex xmlhttprequest(),         = this, //this points clicked element, reference var         querystring = 'field=' + funcnumber;         //your basic setup         //followed piece of magic:         this.onclick = null;//unbind handler         ajax.onreadystatechange = function()         {             if (this.readystate === 4 && this.status === 200)             {//call complete                 funcnumber++;//increment                 that.onclick = handler;//rebind event handler, that's why named             }         };     };     document.getelementbyid('areaid').onclick = handler;//bind handler }; 

of course, code needs lot of work, still. if want x-browser xhttp object, example:

var getxhr = function() {     try     {         return new xmlhttprequest();     }     catch (error)     {         try         {             return new activexobject('msxml2.xmlhttp');         }         catch(error)         {             try             {                 return new activexobject('microsoft.xmlhttp');             }             catch(error)             {                 throw new error('no ajax support?');             }         }     } }; 

also, since we're on x-browser stuff, note window.onload can cause memory leaks, which quite easy avoid if understand way event delegation , closures work. since you're relatively new js, suspect may want read on that... worth it!