Databases
StackOverflow2013
Postsdbo
POjQuery $.get being called multiple times...why?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery $.get being called multiple times...why?
    text
    copied!<p>I am building this slideshow, hereby a temp URL:</p> <p><a href="http://ferdy.dnsalias.com/apps/jungledragon/html/tag/96/homepage/slideshow/mostcomments" rel="nofollow">http://ferdy.dnsalias.com/apps/jungledragon/html/tag/96/homepage/slideshow/mostcomments</a></p> <p>There are multiple ways to navigate, clicking the big image goes to the next image, clicking the arrows go to the next or previous image, and you can use your keyboard arrows as well. All of these events call a method <strong>loadImage</strong> (in slideshow.js).</p> <p>The image loading is fine, however at the end of that routine I'm making a remote Ajax call using $.get. The purpose of this call is to count the view of that image. Here is the pseudo, snipped:</p> <pre><code>function loadImage(id,url) { // general image loading routine // enable loader indicator $("#loading").show(); var imagePreloader = new Image(); imagePreloader.src = url; loading = true; $(imagePreloader).imagesLoaded(function() { // load completed, hide the loading indicator $("#loading").hide(); // set the image src, this effectively shows the image var img = $("#bigimage img"); img.attr({ src: url, id: id }); imageStartTime = new Date().getTime(); // reset the image dimensions based upon its orientation var wide = imagePreloader.width &gt;= imagePreloader.height; if (wide) { img.addClass('wide'); img.removeClass('high'); img.removeAttr('height'); } else { img.addClass('high'); img.removeClass('wide'); img.removeAttr('width'); } // update thumb status $(".photos li.active").removeClass('active'); $("#li-" + id).addClass('active'); // get the title and other attributes from the active thumb and set it on the big image var imgTitle = $("#li-" + id + " a").attr('title'); var userID = $("#li-" + id + " a").attr('data-user_id'); var userName = $("#li-" + id + " a").attr('data-user_name'); $(".caption").fadeOut(400,function(){ $(".caption h1").html('&lt;a href="' + basepath + 'image/' + id + '"&gt;' + imgTitle + '&lt;/a&gt;'); $(".caption small").html('Uploaded by &lt;a href="' + basepath + 'user/' + userID + '"&gt;' + userName + '&lt;/a&gt;'); $(".caption").fadeIn(); }); // update counter $(".counter").fadeOut(400,function() { $(".counter").text(parseInt($('.photos li.active .photo').attr('rel'))+1).fadeIn(); }); // call image view recording function $.get(basepath + "image/" + id + "/record/human"); // loading routine completed loading = false; } </code></pre> <p>There is a lot of stuff in there that is not relevant. At the end you can see I am doing the $.get call. The problem is that it is triggered in very strange ways. The first time I navigate to a tumb, it is called once. The next time it is triggered twice. After that, it is triggered 2 or 3 times per navigation action, usually 3. </p> <p>I figured it must be that my events return multiple elements and therefore call the loadimage routine multiple times. So I placed log statements in both the events and the loadimage routine. It turns out loadimage is called correctly, only once per click. </p> <p>This means that it seems that the $.get is doing this within the context of a single call. I'm stunned.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload