execute a statement when another function started or ended in JavaScript

Question

I have a loader,

<div id="loading">Loading..!</div>
<script>$('#loading').hide();</script>

and i want to show that loader automatically when a js function is started and hide when js function completed.

and in js file,

function myfunc{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

function myfunc1{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

.... .. ....

function myfuncN{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

i want to show loader automatically instead of writing that statement to every function.

I would say you're doing it the correct way. This way is clear about what is happening, and it's not all that inconvenient to have two important lines. Working out some function detection thing to execute one line is a lot of potentially complex work for almost no gain. — Michael Conard
– Michael Conard, Commented Jun 21, 2018 at 15:25
Do your functions use async/await? If so please indicate in your examples. Otherwise, if they execute synchronously, there's no point in trying to show and hide the loader because the browser would not repaint until the function completes, and you would never see the loader. — Alexey Lebedev
– Alexey Lebedev, Commented Jun 21, 2018 at 15:25

P.S. · Accepted Answer · 2018-06-21 15:44:00Z

1

As already mentioned in comments, you're following more clear way now, but if you still wanting to apply additional lines to existing functions, you can use .apply() for that like I did it in applier function below:

function applier(initialFunction) {
    return function() {
        alert('apllied part before main logic');
        var result = initialFunction.apply(this, arguments);
        alert('apllied part after main logic');
    };
}

func1 = function() {
    alert('func1, logic from main function');
}
func2 = function() {
    alert('func2, logic from main function');
}

var newFunc1 = applier(func1);
var newFunc2 = applier(func2);

newFunc1();
newFunc2();

answered Jun 21, 2018 at 15:44

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

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

Comments

Teobis · Accepted Answer · 2018-06-21 15:31:39Z

0

If you are using ajax jQuery function, you can declare a global Ajax configuration like this

$.ajaxSetup({
    beforeSend: function() {
        $('#loading').show();
    },
    complete: function() {
        $('#loading').hide();
    }
});

This way you can show your loading indicator on every time an asyncronus call starts and hide it when it ends

I hope this Helps

answered Jun 21, 2018 at 15:31

Teobis

8555 silver badges13 bronze badges

Comments

CaptEmulation · Accepted Answer · 2018-06-21 15:44:08Z

0

You can write a function to decorate other functions.

in ES6

function showAndHide(func) {
  return (...args) => {
    $('#loading').show();

    func(...args);

    $('#loading').hide();
  };
}

const myFunc = showAndHide(() => {
   //blah blah
});

or is ES5

function showAndHide(func) {
  return function decoratedShowAndHide() {
    $('#loading').show();

    func.apply(this, arguments);

    $('#loading').hide();
  };
}

var myFunc = showAndHide(function () {
   //blah blah
});

The showAndHide function accepts a function as an argument and returns a function. It can thus decorate the execution of the function and provide reuse.

edited Jun 21, 2018 at 15:44

answered Jun 21, 2018 at 15:40

CaptEmulation

4,5962 gold badges20 silver badges14 bronze badges

1 Comment

CaptEmulation Over a year ago

The other concerns about if these show and hide are wrapping async actions and whether this code would work at all in a synchronous execution are valid.

Collectives™ on Stack Overflow

execute a statement when another function started or ended in JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related