속도 향상 AngularJS와 : 감소 시계

Question

같은 대형 방법 "quantityOf(garment)"는 세트의 각 항목에 대한 네 번이라고합니다.

이 이들의 각을 계산하는, 사람이 항목을 클릭하면 큰 지연이있을 것을 의미합니다.

"product list"라는 컬렉션에서 각 garment가 밖으로 나열됩니다. 의류가 주문에 추가되면 컬렉션 Order.lineitems에 추가됩니다. quantityOf(garment) 방법은 각 의류가 Order.lineitems

되는 HTML 존재 횟수를 보인다 :

<div ng-switch="orderCtrl.quantityOf(garment)" ng-class="{ 'clicked': orderCtrl.quantityOf(garment) > 0 }" ng-click="orderCtrl.addGarment(garment)"> 

    <button type="button" ng-show="orderCtrl.quantityOf(garment) > 0"> 
    &times; 
    </button> 

    <div ng-switch-when="0> 
    <span class="glyphicon glyphicon-plus"></span> 
    </div> 
    <div ng-switch-default> 
    {{orderCtrl.quantityOf(garment)}}&times; 
    </div> 

    <p> 
    {{garment.name}} 
    </p> 
</div> 

"헤비 듀티"방법

this.quantityOf = function(garment){ 
    var index = _.findIndex(this.order.lineitems, function(b){ 
    return b.id === garment.id; 
    }); 

    if (index != -1){ 
    return this.order.lineitems[index].quantity 
    } else { 
    return 0 
    } 
}; 

. (여기서 _은 lodash 방법 https://lodash.com/docs#findIndex 지칭)

은 단순히이 기능을 구현하기 위해 간단하고 가벼운 방법을 생각할 수 없다. 솔루션에서

시도 는 내가 lineitems에 추가 된 ID의 추적 "presentItems"라는 새로운 각도 배열을 만들어야합니까? 아마도 검색하는 것이 더 빠를 것입니까?

productlist 컬렉션에 속성을 추가해야하나요?이 항목이 추가되었는지 여부를 확인할 때 사용할 수있는 "추가 된"부울?

Answer 1

실제 솔루션

레드 헤링 (Red Herring)으로 밝혀졌다 위의 문제! 더 적은 관찰자가있는 것이 좋지만 - 위는 분명히 clunky 였고, 실제 문제는 iOS에서 버튼을 누를 때 300ms 지연되었습니다.

당신이 각도 사용하는 경우, 여기에 솔루션을의 http://joegaudet.com/angular/mobile/2013/07/22/fast-clicks-with-angular-js.html

그렇지 않으면, "빠른 버튼을 구글"에 대한 검색 - 구글 코드를 마무리 일부 JS 라이브러리가있다. 당신의 도움의 모든

솔루션

감사합니다.

garment에 "added"라는 부울을 추가하여 product list에있는 해결책을 찾았습니다. 제품 목록을 수정하는 것이 이상하지만 빠른 것이고 작동합니다.

<div ng-switch="garment.added" ng-class="{ 'clicked': garment.added }" ng-click="orderCtrl.addGarment(garment)"> 

    <button ng-click="orderCtrl.removeGarment(garment); $event.stopPropagation()" ng-show="garment.added" > 
    &times; 
    </button> 

    <div ng-switch-default type="button" class="btn btn-link add-button"> 
    <span class="glyphicon glyphicon-plus"></span> 
    </div> 
    <div ng-switch-when="true" type="button" class="btn btn-link add-button"> 
    {{orderCtrl.quantityOf(garment)}}&times; 
    </div> 

    <p> 
    {{garment.name}} 
    </p> 
</div> 

각도 HTML :

function addGarment(garment){ 
    var index = _.findIndex(this.order.lineitems, function(b){ 
     return b.id === garment.id; 
    }); 

    if (index != -1){ 
     this.order.lineitems[index].quantity += 1; 
    } else { 
     garment.added = true; // ADDED 
     var new_garment = garment; 
     new_garment['quantity'] = 1; 
     this.order.lineitems.push(garment); 
    } 
    } 


    function removeGarment(garment) { 
    var index = _.findIndex(this.order.lineitems, function(b){ 
     return b.id === garment.id; 
    }); 
    if (index == -1) return; 

    if (this.order.lineitems[index].quantity > 1){ 
     this.order.lineitems[index].quantity -= 1; 
    } else { 
     garment.added = false; // ADDED 
     this.order.lineitems.splice(index, 1); 
    } 
    }