快速的JavaScript瀏覽器中使用angularjs，kendotabstrip和JavaScript陣列

Question

我已經創建了kendotapstrip溢出調整問題。標籤欄中有三個標籤，溢出中有兩個標籤。

我正在使用angularJS指令來控制功能。

我已經將調整大小事件綁定到窗口。只要您開始調整大小，將調用resizeTabstrip（）函數，並根據可用空間量隱藏標籤或在標籤欄上顯示標籤（使用css樣式）。

如果空間太少，隱藏一個選項卡並將其添加到溢出數組（在作用域scope.overflowTabs []上設置）。

如果有足夠的空間，該選項卡將從溢出數組中移除並重新顯示在tabstrip上。

這是我的問題：

如果你重新大小上下真的很快，選項卡失蹤：

上述PIC顯示了一個非常快速的重新後標籤欄使用瀏覽器窗口的全尺寸上/下尺寸，但標籤頁2中沒有選項卡2。

這是調用resizeTabstrip（）函數的主要調整大小綁定：

  angular.element(myWindow).bind('resize', function(e) {      
       setTimeout(function() { 
        callResizeTabstrip();       
       },500); 
      }); 

正如你所看到的，我打電話變量callResizeTabstrip有500毫秒的延遲。這個變量又分配了一個函數調用resizeTabstrip（）：

  var callResizeTabstrip = _.throttle(function(e) { 
       resizeTabstrip(); 
      }, 500); // Maximum run of once per 500 milliseconds 

resizeTabstrip（）是一個underscore.js _.throttle函數內部中，以確保每500ms調用一次。

裏面的resizeTabstrip（）函數，主引擎，我這樣做：

  function resizeTabstrip() { 
       // get the tabstrip... 
       // calculate the amount of space... <-- THE PROBLEM IS HERE I THINK 
       // if very little space then... 
       scope.moveTabToOverflow(tabstripId, tabTitle); 
       // else if enough space 
       scope.moveTabFromOverflow(tabstripId, scope.overflowTabs[tabstripId]);      
      } 

大量計算的完成，爲每個調整大小（和調整大小事件被觸發負載）。這是我認爲問題的原因。事情過於迅速，瀏覽器無法處理。

有沒有人有任何建議，我該如何解決這個問題？

Answer 1

好吧，我找到了一個答案：在超時結束時觸發一個自定義事件，檢查tabstrip並刷新它，以便所有tab都存在且正確。

使用自定義事件（resizeEnd）來觸發觸發器。

  angular.element(myWindow).bind('resize', function(e) { 
       setTimeout(function() { 
        callResizeTabstrip(); // the main function 
        $(this).trigger('resizeEnd'); // my custom event called afterwards 
       },1000); // delay for 1 second 
      }); 

然後我將這個自定義事件綁定到窗口。它獲得了標籤欄上的所有標籤（隱藏和可見），並重新加載它們：

  angular.element(myWindow).bind('resizeEnd', function() { 
       // get the tabstrip using a jquery selector 
       // get the id of the tabstrip, also using jquery ([attr="id"]    
       // get all tabs on this tabstrip but not tabs in the overflow 
       var tabs = $('[id='+tabstripId+']    
              li:not(#overflowTab'+tabstripId+')');      

        $.each(tabs, function(index, tab) { // for each tab 
         // show the tab (css display: block) 
         showTabOnTabstrip(tabstripId, index); // ensures all tabs are placed back on the tabstrip       
        });          
      });