How to timeout a href?

Question

I am using two function on same element, one is AJAX for saving picture and second is prettyPhoto ajax for dispaying that picture here is example

THIS is EVENT

> <a rel="prettyPhoto[ajax]" onClick="return false"
> onMouseDown="javascript:capture();"
> href="xhr_response.php?ajax=true&width=1100&height=482"><img
> src="img/assets/zoom2.png"></a>

Here i initalize prettyPhoto

$(document).ready(function(){ 
    $("a[rel^='prettyPhoto']").prettyPhoto({ social_tools:false, }); 
}); 

Here is my capture function to save image

function capture() {
    $('#zoomTarget').html2canvas({
        onrendered: function (canvas) {
            var url = "ajax.php";
            var imgSrc = canvas.toDataURL();
            $.post(url, {contentVar: imgSrc } ,function(data) {});
        }
    });
} 

All is working nice, but the problem is that i need some time to save image, and prettyPhoto is loading image so fast, this means, that proper image is not loaded on first time when user click in element, need time to same image, on second or on third time proper image is showing ok, how to prevet prettyPhoto to wait to image to be saved?

and here is ajax.php

$contentVar = $_POST['contentVar'];
$filteredData=substr($contentVar, strpos($contentVar, ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);

Answer 1

Reload image in callback function of saving image:

function capture() {
    $('#zoomTarget').html2canvas({
        onrendered: function (canvas) {
            var url = "ajax.php";
            var imgSrc = canvas.toDataURL();
            $.post(url, {contentVar: imgSrc }, function(data) {
                // load new image here
                // ??? xhr_response.php?ajax=true&width=1100&height=482 ???
            });
        }
    });
}