add a "delay"function with JavaScript

Question

I have been looking through a lot of similar questions without getting what I rely need.

I have some code that executes every time a window.onresize event occurs. But the code is tough and usually there are many .onresize events within a short timeperiod, and frankly the code that needs to be executed only have to run once.

So what I'd like is some code that waits for some time, while the resize event goes on, and THEN fires just this once (until a new resize event is triggered).

I have tried with both setInterval and setTimeout, but I have found that those methods just wait the amount of time I have specified and then runs the code exactly as many times as the window was resized (once for every few pixels the window was resized). Repeting the same code over and over again locks up the browser up to 3-4 seconds, so I'm thinking that maybe it is better to lock up the browser while the resizeing is going on and then execute the code.

The code that are being executed is making sure that what is shown on the screen is shown where it belongs. It is a lot of styling, much similar to CSS but done dynamically with JavaScript relative to the inner window size.

Plz, no jQuery solutions.

I hope I have been specific enough and that I can understand your reply's. I have only been in the programming business for 3 months and I have no real education, so I only know what school of life has taught me so far. So plz explain in detail how you are suggesting your code should be used.

Here is a little of what is going on.

window.onresize = function(){resize()};

...

function resize()
{
...
var CL = document.getElementById("centerleft");
CL.style.position = "absolute";
CL.style.overflow = "auto";
CL.style.top = quaterCONSTANT+"px";
CL.style.left = "0px";
CL.style.width = CONSTANT+"px";
if ( getWidth("menu") > CONSTANT)
    TL.style.width = getWidth("menu")+"px";
CL.style.height = h+"px";
CL.style.backgroundColor = "#E6E6E6";
...
}

CONSTANT and quaterCONSTANT being constants and getWidth(id) being a function to get the width of the element I'm asking upon, in this case being the width of my menu in the center left block of my webpage.

Now I have a lot of those things going on every time I resize. I know that I should take out stuff like not setting the color to the same over and over again. That should be set once, but as the project evolved this just sort of went along. It wasn't my original intention to implement the resize function.

Molle

T.J. Crowder · Accepted Answer · 2013-08-06 09:33:40Z

1

What you need to do is set a variable outside of your resize listener, and then create the timeout in there.

var resizeTimeout = 0;

window.onresize = function() {
    // Clear our previously-scheduled resize if any (no-op if it's 0)
    clearTimeout(resizeTimeout);

    // Schedule to resize in X milliseconds
    resizeTimeout = setTimeout(function() {
        // Clear our timer handle and do the resize
        resizeTimeout = 0;
        resize();
    }, timeout); // `timeout` is in milliseconds, so for instance, 100
};

This will just keep re-assigning the timeout as you’re resizing until you stop, at which point the timeout will complete and fire your function.

edited Aug 6, 2013 at 9:33

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Aug 6, 2013 at 9:24

Martin Bean

39.6k28 gold badges134 silver badges207 bronze badges

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

7 Comments

Benjamin Gruenbaum Over a year ago

Didn't you mean to also clear the timeout on every resize event? Otherwise it's not helpful at all, all events will still fire - only late.

Molle Over a year ago

"I have only been in the programming business for 3 months and I have no real education, so I only know what school of life has taught me so far. So plz explain in detail how you are suggesting your code should be used." Can you plz explain a little more about where to put what kind of code? And I believe you to be right about the clear timeout issue. I'm thinking that if I can get to understand HOW, this could be the answer :)

6502 Over a year ago

Where is stated that 0 is an invalid timeout id? Where it's stated that's safe to pass an invalid timeout id to clearTimeout?

T.J. Crowder Over a year ago

@6502: In the specification. For setTimeout: "Let handle be a user-agent-defined integer that is greater than zero that will identify the timeout to be set by this call." and for clearTimeout: "If handle does not identify an entry in the list of active timeouts of the WindowTimers object on which the method was invoked, the method does nothing." It's always been true, though, the spec just documents what browsers have always done.

6502 Over a year ago

@T.J.Crowder: thanks. I was looking at Mozilla docs and neither of the two properties are cited (so this makes me wonder if all browsers support them down to these details). BTW it's trivial to avoid making assumptions about what a timeout ID is and to avoid clearing a timeout that wasn't set so I'd probably prefer different coding.

|

Collectives™ on Stack Overflow

add a "delay"function with JavaScript

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related