9885

fire ajax call in function binding window.scroll only once per conditional check

Question:

I am having this <a href="http://jsfiddle.net/c7nS5/28/" rel="nofollow">fiddle</a> which detects if targeted div is in the viewport. However if I want to fire only one ajax call when the DOM element is in the viewport (instead of multiple times). How could I make this happen?

if( isTargetVisble() ) { // if target element is visible on screen after DOM loaded $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info alert('this is going to be the ajax call') } else { $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info }

It is firing multiple alert() right now as it is binding to window.scroll. How could I just fire one when it becomes visible?

Answer1:

Keep track of the visible state of the target with a variable. On each scroll, compare the new value of isTargetVisble() with the old.

var _alreadyVisible = false; $(window).scroll(function(){ // bind window scroll event if( $('.target').length > 0 ) { // if target element exists in DOM if( isTargetVisble() ) { // if target element is visible on screen after DOM loaded if(_alreadyVisible){ //ignore the scroll } else { //the target just became visible _alreadyVisible = true; console.log('target became visible') $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info } } else { if(_alreadyVisible){ //the target was just hidden _alreadyVisible = false; $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info console.log('target became invisible') } else { //ignore } } } });

See this <a href="http://jsfiddle.net/wilsonjonash/c7nS5/27/" rel="nofollow">fiddle</a> (bring up the console with F12 and notice how there is only a log when the target changes visibility, not on every scroll)

Recommend

  • Why can't UI components be accessed from a backgroundworker?
  • Application level floating views with navigation in Android
  • How to getText() from the input field of an angularjs Application
  • AndEngine Applying Transparancy to AndEngine View
  • Using a canvas object in a thread to do simple animations - Java
  • CakePHP 2.0.4 - findBy magic methods with conditions
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Functions in global context
  • Meteor helpers not available in Angular template
  • Get data from AJAX - How to
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • FileReader+canvas image loading problem
  • Ajax Loaded meta Tags
  • Display issues when we change from one jquery mobile page to another in firefox
  • Problems to linebreak with an int in JLabel
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • Bug in WPF DataGrid
  • How to add date and time under each post in guestbook in google app engine
  • Fill an image in a square container while keeping aspect ratio
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Symfony2: How to get request parameter
  • Upload files with Ajax and Jquery
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Compare two NSDates in iPhone
  • How to get icons for entities from eclipse?
  • File upload with ng-file-upload throwing error
  • How to include full .NET prerequisite for Wix Burn installer
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • Java static initializers and reflection
  • Qt: Run a script BEFORE make
  • JaxB to read class hierarchy
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?