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)

possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) (and about 1000 others) — Adam Jenkins, Nov 10 '14 at 13:42
@Bharath - don't encourage `setTimeout` to deal with async programming - as it may accidentally solve the user's problem — Adam Jenkins, Nov 10 '14 at 13:43
@Adam Yup, i just thought to delay the ajax request but eventually OP wanted that ajax itself to delay. — Bharath, Nov 10 '14 at 13:46

score 2 · Answer 1 · answered Nov 10 '14 at 13:45

2

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;  
    });    
};

answered Nov 10 '14 at 13:45

jAndy

231,737
57
305
359

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

DontVoteMeDown · Accepted Answer · 2014-11-10T19:24:40.803

1

You have to use a callback. Try this:

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

edited Nov 10 '14 at 19:24

answered Nov 10 '14 at 13:44

DontVoteMeDown

21,122
10
69
105

Im a bit lost here with the json , json.id, and json.url. the $.getJSON('/picture') returns a link of a picture like http://www.domain.name/image.jpg and I would like to put use that link in an img tag: could you give me more info about your implementation please? Thanks and really sorry for my noobness – Bobys Nov 10 '14 at 14:03
@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? – DontVoteMeDown Nov 10 '14 at 17:39
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 I dont know if you get exactly what I need to do. Not native english, but Im doing my best. – Bobys Nov 10 '14 at 18:12
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 Nov 10 '14 at 18:48
@user3207652 yeah, I got what you mean now. My answer should work for you. Give it a try. – DontVoteMeDown Nov 10 '14 at 18:49
Sorry, it doesn't. Here's what I'got so far: http://jsbin.com/fijuqavoqi/1/ ofcurse the getJSON will not work on jsbin. Its just for you to take a glimpse on my code. – Bobys Nov 10 '14 at 18:54
@user3207652 your code isn't exactly as mine. You are using `$.JSON.getJSON` which throws an error because `getJSON` is a method from the `$` object, and not from `$.JSON`. I'm afraid that `$.JSON` is `undefined`. So try: `$.getJSON` – DontVoteMeDown Nov 10 '14 at 18:56
Sorry, I've tried your codebut still the same.. I forgot to delete .JSON, when I was trying something. You can see the clean file on the same link now. – Bobys Nov 10 '14 at 18:58
@user3207652 It doesn't because what you already said: getJSON will not work on jsbin. But the ajax request is being opened, check the Network tab on Dev tools(F12). I suggest you to test in your real environment. – DontVoteMeDown Nov 10 '14 at 19:03
Of-curse Im checking it in real environment. I think the problem is that the src variable is getting a [object Object] value. I've tried to print the value of src in a
tag and it gives a [object Object] not an actual link/string
– Bobys Nov 10 '14 at 19:06
@user3207652 I think that happens because the response from the server isn't a string, but an object, and this object may have a property called `pictureLink` as you defined in your server-side script. In order to check a javascript variable, use `console.log(variable)` and check it on the console tab on your Dev tools (F12). Look my update. – DontVoteMeDown Nov 10 '14 at 19:26
Thanks DontVoteMeDown, now it works. it can load the picture. But I noticed that if you click the button again, the bootstrap Modal will pop up again with the same picture, it doesnt reload the new one. But I can see the camera led turning on which means it runs the flask function but it does not reload the new picture. Do you have anything to suggest about that. Im really sorry that my questions have no end. – Bobys Nov 10 '14 at 19:36
@user3207652 this is probable a cache problem, check [this](http://stackoverflow.com/q/13391563/1267304) out. – DontVoteMeDown Nov 10 '14 at 19:41
@user3207652 besides, if you want to open the modal with no image, you have to se the src to empty before open it, otherwise the modal will open with the previous image before load the new one. – DontVoteMeDown Nov 10 '14 at 19:42
src="" doesnt means empty? – Bobys Nov 10 '14 at 19:44
@user3207652 yeah, try it. – DontVoteMeDown Nov 10 '14 at 19:44
It was like that from the beginning, but when the modal, is loaded Im getting a corrupt img icon till the proper image is loaded. And when the image i loaded and press the button again, the previus image is loaded. – Bobys Nov 10 '14 at 19:49
@user3207652 well, its to you now, you can chose between show another image with a loading animated message, you can hide the element, or anything like this. – DontVoteMeDown Nov 10 '14 at 19:51
1

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! – Bobys Nov 10 '14 at 19:59

score 0 · Answer 3 · answered Nov 10 '14 at 13:44

0

As specified in documentation, there is some callback function:

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

So just do:

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

answered Nov 10 '14 at 13:44

Justinas

41,402
5
66
96

Delay before execution

3 Answers3