angularJS hiệu suất vấn đề với bộ đếm thời gian bắn

Question

Tôi đang xây dựng một ứng dụng góc khá lớn, vấn đề của tôi là rò rỉ bộ nhớ dẫn đến đóng băng trang. khi nhấp vào một nút, ứng dụng của tôi sẽ mở ra một cửa sổ bật lên, (với sự trợ giúp của chỉ thị tùy chỉnh), nội dung của cửa sổ bật lên này được thêm vào động và cửa sổ bật lên được gọi với $ http từ tệp cục bộ.

Tôi đã sử dụng công cụ phát triển chrome để đến với những điều sau đây theo những gì thời gian đã cho tôi:

Như bạn có thể thấy, bộ đếm thời gian là bắn trong một thời gian dài trước khi render sẽ xảy ra. và thời gian này càng ngày càng nhiều khi người dùng thực hiện nhiều lần (đóng cửa sổ bật lên và mở lại). Trừ khi anh ta đi đến một số trang khác và trở lại hoặc làm mới trang. Vì vậy .... Làm thế nào tôi có thể phá hủy tất cả các giờ trước hoặc những gì đã được thực hiện để thu thập rác. Hoặc là nó cái gì khác mà phải được thực hiện.

Answer 1

Bạn nên bọc chức năng được gọi bằng nút trong chức năng gỡ lỗi. Xem hàm dưới đây. Điều này sẽ đảm bảo rằng bất cứ khi nào người dùng nhấp vào nút, hành động cuối cùng sẽ bị hủy.

Liên quan đến hiệu suất đảm bảo rằng nội dung bật lên bị xóa khỏi dom khi người dùng đóng cửa.

Có nguồn gốc từ: https://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
}; 

Answer 2

tôi khuyên bạn nên sử dụng $ timeout trên setTimeout because of these reasons.

Một giải pháp khả thi để memoryleak của bạn là bằng cách hủy tính giờ khi góc loại bỏ các yếu tố từ DOM như trong ví dụ này:

var timer = $timeout(
        function() { 
         console.log("Timeout executed", Date.now()); 
        }, 
        2000 
       ); 
       // Let's bind to the resolve/reject handlers of 
       // the timer promise so that we can make sure our 
       // cancel approach is actually working. 
       timer.then(
        function() { 
         console.log("Timer resolved!", Date.now()); 
        }, 
        function() { 
         console.log("Timer rejected!", Date.now()); 
        } 
       ); 
       // When the DOM element is removed from the page, 
       // AngularJS will trigger the $destroy event on 
       // the scope. This gives us a chance to cancel any 
       // pending timer that we may have. 
       $scope.$on(
        "$destroy", 
        function(event) { 
         $timeout.cancel(timer); 
        } 

ví dụ từ Ben Nadel