Question

I am trying to show an spinner in a button when is pressed, the executing is very fastbut I would like to vissually make it slower, so I want to add a delay to the hide spinner and then execute another function. What I have is:

$$('.LinkButton').each(function (el) {
    el.addEvent('click', function (e) {
        e = new Event(e);
        e.stop();
        var data = MyData Parameters;
        var ID = MyID;
        loadingSpinner = new Spinner(el, { containerPosition: { relativeTo: el, position: 'left', class: 'spinner-img' } });
        var myRequest = new Request.HTML({
            method: 'post', url: 'URL.ashx',
            onRequest: function () {
                loadingSpinner.show(true);
                SetButtonEnable(ID);

            },
            onSuccess:
                function()
                {
                    loadingSpinner.hide(true).delay(5000);
                    TextOut(el.get('title'));

                }
        });

        myRequest.send(data);
    })
})

As you can see is very simple! I just when press button to show the spinner, disable the button, wait a few seconds and then hide the spinner and put a text on a div that the element was inserted. Thats all, but I dont know how is not possible with delay... Any advice guys... thanks!!!

EDITED:

function TextOut(Title) {
    var elementAdd = new Element('div', { 'class': 'MyClass', 'text': Title, 'styles': { 'opacity': 0 } });
    elementAdd.inject($('DivElement'), 'top').fade('in');
}
Was it helpful?

Solution

I cannot see the souce code of things like TextOut but...

function() {
    // create an anonymous function that does both. 
    (function(){
        loadingSpinner.hide(true);
        TextOut(el.get('title'));
    }).delay(5000); // optional context (this) and args after 5000
}

// also works
loadingSpinner.hide.delay(5000, loadingSpinner, true);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top