調整大小後運行函數（沒有underscope.js）？

Question

從控制器我檢測$窗口的調整大小事件，並在它後面重新啓動我的輪播指令。

但問題是，該carusel重新啓動近5-6倍。我找不到任何有用的解決方案。

angular.element($window).bind('resize', function() {         
    $scope.$apply(function(){ 
      $scope.showCarousel = false;  
      $timeout(function(){ 
      $scope.calculateGamesCount(); 
      $scope.showCarousel = true; 
      }, 250);    
    }); 
}); 

如何檢測，如果resize事件完成，然後運行功能？

Answer 1

不幸的是，沒有像我們可以調用的「調整大小」這樣的事件。每個像素的變化都是它自己的獨立事件。如果第三方解決方案是100％出了問題，你可以實現自己的土生土長的反跳：

function debounce(f, n){ 
    let allow_run = true; 
    return function(...args){ 
     if(allow_run){ 
      allow_run = false; 
      setTimeout(_=> allow_run = true, n); 
      return f.apply(f, args); 
     } 
    } 
} 

window.onresize = debounce(_=> console.log('resizing!'), 250); 

從本質上講，我們有一個看門人，allow_run。如果在門打開時調用了去抖功能，則允許執行，門關閉直到超時（n毫秒）結束。如果在門「關閉」時調用了去抖功能，則不會發生任何事情。

demo