pause a function and wait for another function to execute

Question

Here is my scenario, i have three functions

first one is the main function, and this also calls the second function for retrieving a value.

here is the first call

this.markdownarea.on("click", "a[data-markdownarea-act]", function(){

//now open a modal window where user will upload a image and get a link
$("#modal-imgupload-content, #modal-bg-imgupload").toggleClass("active");

// now we need the url, so we call the second function to fetch it
var img_up_url = get_img_link();

if(img_up_url){
// now do some thing crazy here ...
}
});

i added comments in the first function(above), so it should explain what this script will do.

now the second function:

function get_img_link() {
// pause this function immediately and let the user runs the third function 
//manually so the value will assign to val and then resume it.
alert(val);
return val;
}

the third function will only work if the user click a submit button. and after the the third function executes it defines a value for val variable which is needed in the second function.

function get_img_url(){

//now when the user click the submit this will get the value of the input field
var e = document.getElementsByName('link_img_up')[0];
val = e.value;
//okay now the value is assigned and the second function should resume 
}

The problem is when the user runs the first function a modal window opens and user can get a value and then click the submit button which will run the third function and assign the value for val and the second option should resume now, but instead of that it immediately executes the second one which returns a undefined variable val

so i want the second function to pause until the user runs the third function and assign a value for val

i cant figure out a way for doing this! is there any better

Answer 1

I think you want the user input first then executing the rest of the code, here is what you might looking for:

for the modal window where user input, we wanna call it first the assaign a value then rest of the code execute,

$("#modal-imgupload_on").click(function () {
        function lol(){
        $("#modal-imgupload-content, #modal-bg-imgupload").toggleClass("active");
        }
        lol();
        });

and now we wanna execute the rest of the code instead of pausing.

            $("#img_up_sub").click(function () {
            var e = document.getElementsByName('link_img_up')[0];
            val = e.value;
            var img_up_url = val;
            if(img_up_url){
            var img_edit_process = function(editor){
            //do something crazy here
            };

             //want some function to execute after .....

            }
            $("#modal-imgupload-content, #modal-bg-imgupload").toggleClass("active");
            //now close the modal and reset all the value
        });

hope this helps :)

Answer 2

Since you are just returning the value in get_img_link(), delete that function

and modify your get_img_url() to return the value.

function get_img_url(){

//now when the user click the submit this will get the value of the input field
var e = document.getElementsByName('link_img_up')[0];
val = e.value; 
return val;
//okay now the value is assigned and the second function should resume 
}

Answer 3

You'll have to split the action you want to pause into two parts, I'm afraid.

Create an object that you initialize with a callback to the action that you want to perform after the users are done with their selection. Give that object a method that should be called after the interactive part has finished. Pass the object to the interactive method.

mySelection = $(...);

// now we need the url, so we call the second function to fetch it
get_img_link( function ( img_up_url ) {
  if( img_up_url ) {
    // now do some thing crazy here ...
    mySelection.doSomethingWithImageUpUrl(...)
  } 
});

The second dialog gets img_up_url, and then calls the callback function, which has theinitial selection in its closure. Personally, prefer using a MVCish approach instead of callback cascades tied to DOM elements.