0

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
4

1 回答 1

1

您需要做的是在调整大小侦听器之外设置一个变量，然后在其中创建超时。

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
};

这将在您调整大小时继续重新分配超时，直到您停止，此时超时将完成并触发您的函数。

于 2013-08-06T09:24:09.770 回答