Delay before execution

Question

I've got this JavaScript here:

$('#takePicturebtn').click(function()
 {
 var injectImage = function(id, url) {
 var z = document.getElementById(id);
 z.src=url; 
 }; 
 injectImage("pic", $.getJSON('/picture'));
 });

The $.getJSON('/picture') needs some time to be executed and return the image link. Is it possible to give some time/delay to be executed and then carry on with the process?

Flask function:

@app.route("/picture")
 def picture():
 link = interact().ftpSession('/home/pi/AlarmwebNew/pictures/' + interact().grabPicture(), interact().grabPicture())
 return jsonify(pictureLink=link)

• Adam Jenkins: possible duplicate of How to return the response from an Ajax call? (and about 1000 others)
• Bharath: use setTimeout to delay the process.
• Adam Jenkins: @Bharath - don't encourage setTimeout to deal with async programming - as it may accidentally solve the user's problem
• Bharath: @Adam Yup, i just thought to delay the ajax request but eventually OP wanted that ajax itself to delay.

Answer 1

A convenient way would be to redesign your injectImage function into accepting a (Promise) object as second parameter instead a string.

var injectImage = function( id, promise ) {
 $.when( promise ).done(function( url ) { 
 var z = document.getElementById(id);
 z.src=url; 
 }); 
}; 

• Bobys: Thanks for your answer so my promise will be $.getJSON('/picture')? $.when($.getJSON('/picture')).done Did I get it right?
• jAndy: @user3207652 Actually the code should work "as is", just replace this version with yours.
• Bobys: But where shall I include the getJASON function? Thats what I dont understand. Thank you for your help

Answer 2

You have to use a callback. Try this:

$('#takePicturebtn').click(function()
{
 $.getJSON('/picture', function(data) 
 { 
 var z = document.getElementById('pic');
 z.src=data.pictureLink; 
 }); 
});

• Bobys: Im a bit lost here with the json , json.id, and json.url. the $.getJSON('/picture') returns a link of a picture like domain.name/image.jpg and I would like to put use that link in an img tag: <img id="pic" src="" class="img-responsive"> could you give me more info about your implementation please? Thanks and really sorry for my noobness
• DontVoteMeDown: @user3207652 Sorry, was me that doesn't understood your code. I have updated it. The src parameter will have a string with the source of the image, right? So just set it to the src attribute of the image element with id pic. May that id change?
• Bobys: Thanks for your reply.. Well src will have to get the value of getJSON(which is a picture link). The concept of the script is to execute the JSON function and then pass the value(link) to the img tag with id="pic". F.E <img id="pic" src="" //The source here should change dynamic. from the script\\ class="img-responsive"> I dont know if you get exactly what I need to do. Not native english, but Im doing my best.
• Bobys: The flask function that returns the link has been added to the original question. I though you mirth find it useful for a correct advices.
• Bobys: I've tried to show an animated loading picture by setting the src on the image tag equal to the animated.gif. The first time it show the loading picture, and then the picture was taken shows up. Every thing's great now. But closing the modal and pressing the button again, the modal shows up with the previous picture. So by showing another picture it doesnt help. I'll try your other suggestions as-well. I appreciate your help. Thank you very much!

Answer 3

As specified in documentation, there is some callback function:

jQuery.getJSON( url [, data ] [, success ] )

So just do:

$.getJSON('/picture', function(){
 alert('done reading json');
});