CODEWITHSUNDEEP
javascriptloopsif-statement
Vaios P.
Vaios P.

Reputation: 404

How to stop if-else statement loop in JavaScript

I have this code

// If there is no data returned, there are no more posts to be shown. Show error
if(data == "") { 

    $this.find('.loading-bar').html($settings.error);                   

} else {

    // Offset increases
    offset = offset+$settings.nop; 

    // Append the data to the content div
    $this.find('#content_ins_con_all_posts').append(data);

    // No longer busy!  
    busy = false;
}

This code displays me a message when hit the bottom and there is no other posts to show. My problem is that when I continue scrolling, the message continue showing again and again multiple times... I just want to show me the message only one time when the posts ends. If there is a way in how I can do that is most welcome.

(function($) {

$.fn.scrollPagination = function(options) {

    var settings = { 
        nop     : 3, // The number of posts per scroll to be loaded
        offset  : 0, // Initial offset, begins at 0 in this case
        error   : 'No More Posts!', // When the user reaches the end this is the message that is
                                    // displayed. You can change this if you want.
        delay   : 2000, // When you scroll down the posts will load after a delayed amount of time.
                       // This is mainly for usability concerns. You can alter this as you see fit
        scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
                       // but will still load if the user clicks.
    }

    // Extend the options so they work with the plugin
    if(options) {
        $.extend(settings, options);
    }

    // For each so that we keep chainability.
    return this.each(function() {       

        // Some variables 
        $this = $(this);
        $settings = settings;
        var offset = $settings.offset;
        var busy = false; // Checks if the scroll action is happening 
                          // so we don't run it multiple times

        // Custom messages based on settings
        if($settings.scroll == true) $initmessage = 'Scroll for more or click here';
        else $initmessage = 'Click for more';

        // Append custom messages and extra UI
        $this.append('<div id="content_ins_con_all_posts"></div><div class="loading-bar">'+$initmessage+'</div>');

        function getData() {

            // Post data to 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 is no data returned, there are no more posts to be shown. Show error

                if(data == "") { 
                    $this.find('.loading-bar').html($settings.error);                   

                } 
                else {  
                    // Offset increases
                    offset = offset+$settings.nop; 

                    // Append the data to the content div
                    $this.find('#content_ins_con_all_posts').append(data);

                    // No longer busy!  
                    busy = false;

                }

            });

        }   

        getData(); // Run function initially

        // If scrolling is enabled
        if($settings.scroll == true) {
            // .. and the user is scrolling
            $(window).scroll(function() {

                // Check the user is at the bottom of the element
                if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {

                    // Now we are working, so busy is true
                    busy = true;

                    // Tell the user we're loading posts
                    $this.find('.loading-bar').html('Loading Posts');

                    // Run the function to fetch the data inside a delay
                    // This is useful if you have content in a footer you
                    // want the user to see.
                    setTimeout(function() {

                        getData();

                    }, $settings.delay);

                }   
            });
        }

        // Also content can be loaded by clicking the loading bar/
        $this.find('.loading-bar').click(function() {

            if(busy == false) {
                busy = true;
                getData();
            }

        });

    });
}

})(jQuery);

Upvotes: 1

Views: 2663

Answers (3)

Yabada
Yabada

Reputation: 1758

You could use a global var to know if you have to display the message

Something like this :

var isDisplayed = false;

then

if (isDisplayed == false)
{
   isDisplayed = true;
   displayMessage();
}

Upvotes: 1

Vivek Jain
Vivek Jain

Reputation: 3889

You may set a flag in your code. Something like:

// If there is no data returned, there are no more posts to be shown. Show error
if(data == "") { 

    if(!flag) {
        $this.find('.loading-bar').html($settings.error);
        flag = true; // You need to declare flag = false at an appropriate place in your code.
    }
} else {

    // Offset increases
    offset = offset+$settings.nop; 

    // Append the data to the content div
    $this.find('#content_ins_con_all_posts').append(data);

    // No longer busy!  
    busy = false;

}

Please take this as a starting point and not as a copy-paste solution.

Upvotes: 1

Alberto Zaccagni
Alberto Zaccagni

Reputation: 31560

Two ways off the top of my head

  1. check where the cursor is, if it is near a certain range from the bottom do not trigger that code
  2. store a flag in the sessionStorage or in a variable (depending on your code) which mean that you already showed the message, remove the flag once the cursor moves away from the bottom past a certain distance you defined.

Upvotes: 3

Related Questions