CODEWITHSUNDEEP
javascriptjqueryextjsasynchronousload
freakish
freakish

Reputation: 56467

timeOut in beforeLoad event

I'm trying to write some ExtJS 4 script. I have the following code:

var companyStoreModel = Ext.create('Ext.data.Store', {
        model: 'CompanyDataModel',
        proxy: {
            type: 'ajax',
            url: _company_load_url,
            reader: 'json',
        },
        listeners: {
            beforeload: function(store, options) {
                            loadFunction(0);
                        },
            load: function(store, records, options) {
                      $('section#test').html('test: data loaded');
                  },
        },
        autoLoad: true,
    });

and at the begining of the script I have:

var _timeout;
var loadFunction = function(no)
{
    $('section#test').html('test: is loading');
    for (var i = 0; i<no; i++)
    {
        $('section#test').append('.');
    }
    _timeout = setTimeout(loadFunction(no++), 100);
}

So I want to show to the user that data is being loaded. Data is loaded well and everything works without beforeload event. This code gives me jQuery error when 

_timeout = setTimeout(loadFunction(no++), 100);

is called. The error is: Maximum call stack size exceeded. Can someone give me a hint how to do such thing or what am I doing wrong?

Upvotes: 1

Views: 604

Answers (2)

joostdevries
joostdevries

Reputation: 930

Right now, your function is being executed straight away (causing a huge call stack of executions). You cannot put it in the setTimeout function like that. You either pass ONLY the function name, a code that can be eval'd or you use an anonymous function:

Name:

// You will need to put no in the global scope for this.
_timeout = setTimeout(loadFunction, 100);

Eval:

_timeout = setTimeout("loadFunction("+no+")", 100);

Anon. func.

_timeout = setTimeout(function() {
    loadFunction(no++);
}, 100);

Upvotes: 2

Bobik Sdoh
Bobik Sdoh

Reputation: 110

You have to clearTimeout when data is loaded:

        load: function(store, records, options) {
                  $('section#test').html('test: data loaded');
                  clearTimeout(_timeout);
              },

Upvotes: 0

Related Questions