的setInterval在調整大小

Question

我有下面的代碼：

var intervalId = ""; 
    var isRunning = false; 
    var iCount = 0; 

    function animation() { 
     switch (iCount++ % 2) { 
      case 0: 
       $('.class1').removeClass("is-active"); 
       $(".class2").addClass("is-active"); 
       break; 
      case 1: 
       $('.class2').removeClass("is-active"); 
       $(".class1").addClass("is-active"); 
       break; 
     } 
     isRunning = true; 
    } 

    if (window.innerWidth > 1024) { 
     intervalId = setInterval(animation, 3000); 
    } 

    $(window).on("orientationchange resize", function() { 

     debounce(function() { 
      if (window.innerWidth < 1024) { 
       if (isRunning == true) { 
        clearInterval(intervalId); 
        isRunning = false; 
       } 
      } else if (window.innerWidth > 1024) { 
       if (isRunning == false) { 
        intervalId = setInterval(animation, 3000); 
       } 
      } 
     }, 250); 
    }); 

我想要得到的，是一個1024+屏幕setInterval被激發，1024以下的東西不開火。但調整到低於1024的setInterval仍然被解僱。

任何幫助將不勝感激。

Answer 1

我得到了它使用此代碼爲我調整大小功能工作。

$(window).on("orientationchange resize", debounce(function() { 
     if (window.innerWidth < 1024) { 
      clearInterval(intervalId); 
      intervalId = ""; 
     } else { 
      if (!intervalId) intervalId = setInterval(animation, 3000); 
     } 
    })); 

Answer 2

該isRunning邏輯是無用的和冗餘與intervalId被定義或不。你爲同一件事情使用了兩個變量，這是過度的。

此外，你測試window.innerWidth兩次：是< 1024或它是否> 1024？第二個測試是沒用的，如果正好是 1024，會發生什麼情況？

此塊代碼使事情變得更清晰，更簡單：

debounce(function() { 
    if (window.innerWidth < 1024) { 
     clearInterval(intervalId); 
    } else { 
     if(!intervalId) intervalId = setInterval(animation, 3000); 
    } 
})