Hi! I'm working on the next version of my web site macforbeginners.com and I'm having a problem with one of the site's features.
Here's what I have created so far: I have a buch of articles with tags and I'm now developing a way to browse these tags. When a tag is hovered, I'm loading the articles which have been tagged with that tag into a div. It's nothing complicated really. When the matching articles are being loaded, a "spinner" appears, indicating that articles are being fetched. Now, here is my problem: If you hover your mouse over several tags quickly, my script will perform ajax requests for each tag, causing the spinner to show and hide several times. What I'm looking for is a solution that will stop all the other ajax requests fetching matching articles when another tag is hovered. Here is the site: http://macforbeginners.com/jquery-problem/ And here is my function: var clickTag = function(scope) { $('ul.tags li', scope).hover(function() { var tag = $(this).html(); $.ajax({ beforeSend: function() { $(".tag-results #spinner").fadeIn(500); }, complete: function() { $(".tag-results #spinner").fadeOut(250); }, type: "GET", url: "fetch-articles.php", data: "view=tagsearch&s="+tag, success: function(msg){ $(".tag-results #tag-results-content").empty().append(msg); } }); $("ul.tags li").removeClass("active"); $(this).addClass("active"); }); } I'm very grateful for any help! Cheers, Mårten