javascript - Execute ajax when html element visible on user screen -

i have script makes ajax request when user reaches end of page. based on scroll event. @ page load showing 16 products on user screen , when scrolls down wish load 16 products. script working executes more 1 ajax request not want. idea show set of 16 products. script is:

$(window).scroll(function() {     if ($(window).scrolltop() + $(window).height() > $('.made').offset().top) {         //here count how many products have shown            var productsshown = $(".productcell").length;         $('.made').hide();         $.ajax({             type: "post",             url: "./ajax/get_more_products.php",             data: {                 "product": productsshown             },             datatype: 'json',             cache: false,             success: function(data) {                 $("#bcontent").html(data);                 $('.made').show();             }         });     } }); 

as can see have div using controler , when user see div - ajax being executed. result ajax being loaed div id="content"

how avoid scroll event execute ajax call more once? tried hiding controller div .made , upon ajax responce showing again can executed 16 products when user goes down again.. ajax called executed more once want it..

hmm, here small addition code, adding flag swiched whenever load more items:

var _itemsloading = false; if ((!_itemsloading) && ($(window).scrolltop() + $(window).height() > $('.made').offset().top)) {     //here count how many products have shown        var productsshown = $(".productcell").length;     $('.made').hide();     _itemsloading = true;     $.ajax({         type: "post",         url: "./ajax/get_more_products.php",         data: {             "product": productsshown         },         datatype: 'json',         cache: false,         success: function(data) {             $("#bcontent").html(data);             $('.made').show();             _itemsloading = false;         }     }); }