Create anonymous function in runtime JavaScript

Question

I have next code structure:

global.js and *.js for each page. Lets take for example global.js and main_menu.js.

I have some elements, that have class ripple_effect, when elements with this class get clicked, the animation begins that runs 650ms, so in order to let users see the animation i try to make a small delay in code ( i know this is not good, but still ).

in global.js i have next code:

var delayForRipple = 300;

function Execute(func) {
    setTimeout(func(), delayForRipple);
}

in main_menu.js i have next code:

$(this).on('click', ".menu_button", function (e) {
        href = $(this).attr('id');
        Execute(function () {
            window.location.href = href;
        });
    });

But this code executes immediately. How can i fix it?

Here is a fiddle for fast reproduction:

var delayForRipple = 300;

$(".wrapper").on('click', "#clickMe", function (e) {
    Execute(function () {
        alert("TEST");
    });
});

function Execute(func) {
    setTimeout(func(), delayForRipple);
}

.test_element {
    height:100px;
    width:100px;
    background-color:red;
}

<div class="wrapper">
    <div id="clickMe" class="test_element"></div>
</div>

setTimeout expects a function reference (or a string), but you're calling func(), which doesn't return a reference, it just redirects ... — Teemu
– Teemu, Commented Nov 27, 2015 at 19:27
actually 300 ms is very short, you can't hardly see the delay. maybe you try with a higher number of ms — mapodev
– mapodev, Commented Nov 27, 2015 at 19:27

Zohaib Ijaz · Accepted Answer · 2015-11-27 19:31:01Z

2

You are doing wrong ... you have to pass callback to setTimeout to be executed and not execute it yourselt there

Do something like

function Execute(func) {
   setTimeout(func, delayForRipple);
}

Or even remove the redundant Execute function

$(".wrapper").on('click', "#clickMe", function (e) {
   setTimeout(function () {
      alert("TEST");
   }, 650);
});

edited Nov 27, 2015 at 19:31

answered Nov 27, 2015 at 19:29

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

2 Comments

Developer Over a year ago

this is not redundant, i will use this functions on many other pages - that is why i dont want to duplicate the setTimeout

Developer Over a year ago

thanks, now i understood how this works. this will help me further. your answer is correct

mapodev · Accepted Answer · 2015-11-27 19:31:14Z

2

This works.

function Execute(func) {
    setTimeout(func, 2000);   
}

Execute(function() {
   alert("test"); 
});

answered Nov 27, 2015 at 19:31

mapodev

9888 silver badges14 bronze badges

1 Comment

Developer Over a year ago

yes, thanks, Zohaib Ijaz was faster so i'm marking his answer as correct one, but will give you an upvote.

Arg0n · Accepted Answer · 2015-11-27 19:33:21Z

1

Change func() to func in setTimeout

answered Nov 27, 2015 at 19:33

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

Create anonymous function in runtime JavaScript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related