How can I perform an operation after that some time (a fraction of second) is passed in JQuery\JavaScript?

Question

I have to perform an operation after a delay time (a fraction of a second).

Actually I have this code section:

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    alert("INTO second function, chrome: " + is_chrome);

    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');

});

What I need to do is replace this alert():

alert("INTO second function, chrome: " + is_chrome);

with an operation that wait some time.

How can I do it?

Thx

Lukesoft · Answer 1 · 2015-05-04T15:36:21.347

2

You can use pure javascript function setTimeout

setTimeout(
  function() 
  {
    //Execute the code to be run
  }, 1000);

final Solution

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;


    setTimeout(
      function() 
      {
        //Execute the code to be run
    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');
      }, 1000);


});

edited May 04 '15 at 15:36

answered May 04 '15 at 15:30

Lukesoft

953
1
12
31

The problem is that no operation have to be performed, it only have to wait and then perform the next operation in my previous example. Can you show me how have I to modify my previous code snippet? – AndreaNobili May 04 '15 at 15:32

Irvin Dominin · Answer 2 · 2015-05-04T15:45:49.760

1

Use a timeout; in javascript you can use setTimeout to:

Calls a function or executes a code snippet after a specified delay.

Like:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var $myNext=$(this).next();

if (is_chrome) {
    window.setTimeout(function() {
         $myNext.css({width: '10000000em', display: 'table-row-group'});
    }, 1000);
}

Demo: http://jsfiddle.net/4pxedhzd/

Ref: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

edited May 04 '15 at 15:45

answered May 04 '15 at 15:29

Irvin Dominin

30,819
9
77
111

Not the downvoter, but this seems like a copy-paste from the MDN. Might not really help the asker since it doesn't clearly connect to the question. Edit: Saw you just edited the post to look a lot more "grounded" in the question :) Disregard my comment. – ILOABN May 04 '15 at 15:36
@FabianMiiro yep, I have improved the answer – Irvin Dominin May 04 '15 at 15:36

Reeno · Answer 3 · 2015-05-04T15:53:43.330

0

Replace

alert("INTO second function, chrome: " + is_chrome);

with

if(is_chrome) {
    var that = this;
    window.setTimeout(function() {
        $(that).next().css({'width':'10000000em', 'display':'table-row-group'});
    }, 1000);
}

This will run the function after 1000 milliseconds (=1 second). You have to set that = this because this has another context in the function.

JSFiddle demo: https://jsfiddle.net/0eajx8sv/

edited May 04 '15 at 15:53

answered May 04 '15 at 15:29

Reeno

5,720
11
37
50

I will try but I don't wan't that anything is printed – AndreaNobili May 04 '15 at 15:30
I don't understand :) If you don't want the alert to be displayed just remove it – Reeno May 04 '15 at 15:33

score 0 · Answer 4 · answered May 04 '15 at 15:33

Instead of having a typical "wait" in the middle of your code I would suggest using callbacks since that's what JavaScript uses normally.

I would suggest using the "setTimeout" function to make the JavaScript call wait some specific time before doing the next things. Here's how it could be used in your scenario:

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    setTimout(waitedCall(), millisecondsToWait);
});

//This function will now be called after "millisecondsToWait" ms. And then execute the rest of the code
function waitedCall()
{
    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');
}

How can I perform an operation after that some time (a fraction of second) is passed in JQuery\JavaScript?

4 Answers4