How to stop Javascript from repeating the function?

Question

Guys I have a javascript which has a each loop in which I am calling a particular function for each index value. This script executes on mouse scroll event upon reaching page end (lazy loading).

This is the main section of the script :

function (data) {
 $.each(data, function (index, value) {
   BindNotice(value);
     });
  }

Now the problem is, after the index reaches it max value, it restarts from the 0 index. So I am getting repeated data in my view. I want to restrict this script to only execute until the index has reached the max value. How would I go about doing this ?

EDIT : ADDED COMPLETE FUNCTION

function callMoreData()
    {
        $.ajax(
                    {
                        type: "GET",
                        url: "/api/values/getnotice",
                        dataType: "json",
                        crossDomain: true,
                        async: true,
                        cache: false,
                        allow: true,
                        success: function (data) {
                            $.each(data, function (index, value) {
                                    BindNotice(value);
                            });
                        },
                        error: function (x, e) {
                       alert('problem while fetching records!');
                        }
                    } );}

From JS file :

$(".mainwrap .innnerwrap").mCustomScrollbar({
    autoDraggerLength:true,
    autoHideScrollbar:true,
    scrollInertia:100,
    advanced:{
        updateOnBrowserResize: true,
        updateOnContentResize: true,
        autoScrollOnFocus: false
    },
     callbacks:{
            whileScrolling:function(){WhileScrolling();},
            onTotalScroll: function () {
            callMoreData();
        }

    }
});

the loop wont start from 0 again, so your function(data) gets called again — john Smith
– john Smith, Commented Jun 10, 2014 at 13:36
It's more likely that it's the scroll event, it executes continously. The each loop only executes once, it doesn't restart by itself. — adeneo
– adeneo, Commented Jun 10, 2014 at 13:36

user3507600 · Accepted Answer · 2014-06-10 14:08:38Z

1

You could call another function, and then set it to do nothing after first go through.

function (data) {
    updateData(data);
}
function updateData(data) {
    updateData = function(data) {};
    $.each(data, function (index, value) {
        BindNotice(value);
    });
}

Demo using alerts.

I made some edits to the code because it sounds more like you're getting multiple events and they are writing over previous events. After the first call, the function is basically set to do nothing. Thus the first callback will be the only callback that calls BindNotice.

Edit

As I mentioned in the comments, to ever receive data again through this channel, you need to restore updateData. Here's an example:

function restoreUpdateData() {
    updateData = function(data) {
        updateData = function(data) {};
        $.each(data, function (index, value) {
            BindNotice(value);
        });
    };
}

edited Jun 10, 2014 at 14:08

answered Jun 10, 2014 at 13:45

user3507600

1,0759 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NewbieProgrammer Over a year ago

This keeps repeating the BindNotice function with the values from index 0.

user3507600 Over a year ago

@NewbieProgrammer, Yea, sorry I misunderstood your question. I made an edit which should only allow the first call to this function to execute (because it sounds like you're getting multiple calls to your function before the first finishes).

NewbieProgrammer Over a year ago

The edited script is executing perfectly. Thank you so much! much appreciated.

user3507600 Over a year ago

@NewbieProgrammer, Something that you need to be aware of is if you ever want to run this again you need to restore the updateData function.

NewbieProgrammer Over a year ago

what do you mean by restore the updateData function ?

|

Simcha Khabinsky · Accepted Answer · 2014-06-10 13:35:40Z

0

Use a global variable to block other requests to this function.

Something like:

 var allow = true;
 function (data) {
     if(allow == true){
          allow = false;
          $.each(data, function (index, value) {
              BindNotice(value);
          });
          allow = true;
     }
 }

answered Jun 10, 2014 at 13:35

Simcha Khabinsky

2,0392 gold badges20 silver badges35 bronze badges

3 Comments

Blazemonger Over a year ago

It's kinda rude to "placehold" your answer this way. Use a comment if you don't have a full answer ready yet. Just because SO uses points doesn't mean it's a competition.

Simcha Khabinsky Over a year ago

I gave me answer "Use a global variable to block other requests to this function."

NewbieProgrammer Over a year ago

unfortunately this doesn't seem to work. No data is being loaded on scroll now.

Collectives™ on Stack Overflow

How to stop Javascript from repeating the function?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related