Open href in link only after certain events have executed <p>I have a link to the Tumblr share widget, and need to append some query string params to it before it opens (triggered by clicking on the link). However, the link opens before these params are appended, I think because it takes a few seconds-- I'm sending an image on the page to be hosted on imgur and returning that URL.</p> <p>Is there any way to delay the new link from being opened until AFTER my new image url is returned??? I've tried using <code>e.preventDefault();</code> and <code>return false;</code> but haven't had any luck.</p> <p>My HTML is:</p> <pre><code>&lt;button id='tumblrshare'&gt;tumblr&lt;/button $('body').on('click','#tumblrshare',function(e){ var svg = $("#svg")[0]; svg.toDataURL("image/png", { callback: function(img) { var img = img.replace("data:image/png;base64,", ""); var imgurTitle = $("meta[property='og:title']").attr("content"); $.ajax({ url: 'https://api.imgur.com/3/image', headers: {'Authorization': 'Client-ID **********'}, type: 'POST', data: {'image': img, 'type': 'base64', 'title': imgurTitle}, success: function(result) { imageURL = result.data.link; window.location = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&amp;caption=mycaption&amp;posttype=photo&amp;content=' + imageURL; }, error: function(){ console.log('error'); } }); //ajax }//callback });//svg }); //tumblrshare </code></pre> <p>Please help!!</p>