窗口大小调整仅有效一次

window resize only works once

本文关键字：一次 调整 有效 窗口大小      更新时间：2023-09-26

我在window.resize事件中有一个函数，它运行良好，除此之外它似乎只工作一次。如果用户再次调整窗口大小，则不会执行该函数。这是代码：

$(window).resize(function() {
   var wait = setInterval(function () {
       if (!$(currentBanner, loading).is(":animated")) {
           clearInterval(wait);
           loading.stop().fadeOut(300, function () {
               if ($('#banner').css('display') == 'block'){
                   setTimeout(function() {
                       bannerInit();
                   }, 800);
                   startInterval();
                   if (initialLoad) {
                       initialLoad = false;
                       next.slideDown();
                       previous.slideDown();
                   }
               }
           });
       }
   }, 200);
}).resize();

有人知道如何确保每次调整窗口大小时都执行该函数吗？

我不知道

你的意图是什么，但如果是在窗口调整大小后延迟执行，你应该将 setInterval 更改为 setTimeout

setInterval 是一个无限循环，它会运行，直到你告诉它停止并且 setTimeout 只执行一次，它将等待 x 毫秒执行。

另外，您不需要调用"resize（）"事件，每次由于任何原因（用户调整大小或最大化等）更改窗口大小时都会触发该事件。

$(window).on("resize",function() {
   var wait = setTimeout(function () {
       if (!$(currentBanner, loading).is(":animated")) {
           clearInterval(wait);
           loading.stop().fadeOut(300, function () {
               if ($('#banner').css('display') == 'block'){
                   setTimeout(function() {
                       bannerInit();
                   }, 800);
                   startInterval();
                   if (initialLoad) {
                       initialLoad = false;
                       next.slideDown();
                       previous.slideDown();
                   }
               }
           });
       }
   }, 200);
});

这是因为您在事件定义结束时调用.resize()。

尝试更改为：

$(window).resize(function () {
//....
});
$(window).resize();
相关文章：