Question

$( document ).bind( 'mousemove', function ( e )
{
    if ( e.pageY > $( document ).height() - 400 )
    {
        $.ajax( {
            url: '/Tweet/GetFiveUserTweets',
            type: 'POST',
            async: false,  // preventing a lot of asynchronous requests            
            success: function ( result )
            {
                // result
            }
        } );
    }
} );

‘async:false’ hangs the browser until request completes and that’s not good.

and when remove ‘async:false', dozen of simultaneous request made because mousemove event….

I don’t want to hang the browser.

I just want a single asynchronous Ajax request at a time.

Can anyone let me know how to do a better coding for this situation?

Edit:

Actually when user scroll down at bottom, I want to get five next records and append them at bottom. http://www.twitter.com do this with tweets….

what’s about:

$(window).bind('scroll', function () {
 if (nearBottomOfPage()) {
   // load things here ...
 }
});

I think it’s better than mousemove…am I right?

Answer 1

make async true.

To avoid multiple simultaneous requests, before starting a request, check a variable, for example if(!active_check) {...} and then set that variable when you start, active_check=true. When the request completes, set the variable to false/null again.

if(!active_check) {
  active_check=true;
  //do request with callback to change active check when done
}

or using your code…

$( document ).bind( 'mousemove', function ( e )
{
    if ( (e.pageY > $( document ).height() - 400) && !active_check)
    {
        active_check = true;
        $.ajax( {
            url: '/Tweet/GetFiveUserTweets',
            type: 'POST',
            async: true,  
            success: function ( result )
            {
                active_check = false;
            }
        } );
    }
} );

That said, the mousemove event fires extremely frequently. You’ll want to use something else, if you can.