Question

我一直在查看很多类似的问题而没有得到我需要的东西。

每次window.onresize事件发生时，我都会执行一些代码。但代码很难，通常在很短的时间内会有很多.onresize事件，坦白说，需要执行的代码只需要运行一次。

所以我想要的是一些等待一段时间的代码，而resize事件继续进行，然后THEN触发一次（直到触发一个新的resize事件）。

我已经尝试了setInterval和setTimeout，但我发现那些方法只是等待我指定的时间，然后运行代码的次数与调整窗口的次数完全相同（窗口每隔几个像素一次）被重新调整大小）。一遍又一遍地重复相同的代码会将浏览器锁定3-4秒，所以我想也许最好在调整大小时锁定浏览器然后执行代码。

正在执行的代码确保屏幕上显示的内容显示在它所属的位置。它有很多样式，与CSS很相似，但是相对于内部窗口大小，使用JavaScript动态完成。

Plz，没有jQuery解决方案。

我希望我已经足够具体，我能理解你的答复。我只从事编程业务3个月而且没有真正的教育，所以我只知道到目前为止我所学的生活。因此，请详细解释您建议如何使用您的代码。

以下是一些正在发生的事情。

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和quaterCONSTANT是常量，getWidth（id）是一个函数来获取我要求的元素的宽度，在这种情况下是我的网页中心左侧块中菜单的宽度。

现在我每次调整大小时都会有很多事情发生。我知道我应该把一些反复设置颜色的东西拿出去。这应该设置一次，但随着项目的发展，这只是一种进展。我最初并不打算实现调整大小功能。

莫尔

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

这将在您调整大小时继续重新分配超时，直到您停止，此时超时将完成并启动您的功能。

使用JavaScript添加“延迟”功能

1 个答案: