How to stop if-else statement loop in JavaScript -
i have code
// if there no data returned, there no more posts shown. show error if(data == "") { $this.find('.loading-bar').html($settings.error); } else { // offset increases offset = offset+$settings.nop; // append data content div $this.find('#content_ins_con_all_posts').append(data); // no longer busy! busy = false; }
this code displays me message when hit bottom , there no other posts show. problem when continue scrolling, message continue showing again , again multiple times... want show me message 1 time when posts ends. if there way in how can welcome.
(function($) { $.fn.scrollpagination = function(options) { var settings = { nop : 3, // number of posts per scroll loaded offset : 0, // initial offset, begins @ 0 in case error : 'no more posts!', // when user reaches end message // displayed. can change if want. delay : 2000, // when scroll down posts load after delayed amount of time. // usability concerns. can alter see fit scroll : true // main bit, if set false posts not load user scrolls. // still load if user clicks. } // extend options work plugin if(options) { $.extend(settings, options); } // each keep chainability. return this.each(function() { // variables $this = $(this); $settings = settings; var offset = $settings.offset; var busy = false; // checks if scroll action happening // don't run multiple times // custom messages based on settings if($settings.scroll == true) $initmessage = 'scroll more or click here'; else $initmessage = 'click more'; // append custom messages , ui $this.append('<div id="content_ins_con_all_posts"></div><div class="loading-bar">'+$initmessage+'</div>'); function getdata() { // post data ajax.php $.post('functions_index_result_all_img.php', { action : 'scrollpagination', number : $settings.nop, offset : offset, }, function(data) { // change loading bar content (it may have been altered) $this.find('.loading-bar').html($initmessage); // if there no data returned, there no more posts shown. show error if(data == "") { $this.find('.loading-bar').html($settings.error); } else { // offset increases offset = offset+$settings.nop; // append data content div $this.find('#content_ins_con_all_posts').append(data); // no longer busy! busy = false; } }); } getdata(); // run function // if scrolling enabled if($settings.scroll == true) { // .. , user scrolling $(window).scroll(function() { // check user @ bottom of element if($(window).scrolltop() + $(window).height() > $this.height() && !busy) { // working, busy true busy = true; // tell user we're loading posts $this.find('.loading-bar').html('loading posts'); // run function fetch data inside delay // useful if have content in footer // want user see. settimeout(function() { getdata(); }, $settings.delay); } }); } // content can loaded clicking loading bar/ $this.find('.loading-bar').click(function() { if(busy == false) { busy = true; getdata(); } }); }); } })(jquery);
two ways off top of head
- check cursor is, if near range bottom not trigger code
- store flag in sessionstorage or in variable (depending on code) mean showed message, remove flag once cursor moves away bottom past distance defined.
Comments
Post a Comment