디 바운싱 기능은 I의 모습을 볼 수있는 몇 가지 시나리오

Question

에서 여러 번 실행됩니다. 프로덕션에서는 _doOnClick이 두 번 이상 실행 중임을 나타내는 오류가 표시됩니다. 모델이 소멸 될 때보기가 제거되기 때문에 이것은 나에게 이해가되지 않습니다. 두 번째 model.destroy 명령을 사용할 수 없습니다. 또한, 즉시 true로 설정된 함수를 디 바운싱하여 _onClick 이벤트를 보호합니다. 밑줄 설명서, http://underscorejs.org/#debounce에서, 그것은 말한다 : 즉시 매개 변수가 디 바운스는 대기의 트레일 링 에지 대신 선도 간격 에게 기능을 트리거하게하는

는 "사실 패스 실수 방지와 같은 상황에서 유용합니다. 두 번째 발사에서 "제출"버튼을 두 번 클릭하십시오. "

일부 사용자가 _doOnClick을 여러 번 관리 할 수있는 잘못된 정보가 있습니까?

편집 :

내 유일한 직감 지금까지 사용자의 컴퓨터가 특히 느리게 실행되는 경우보기를 정리하는, 100ms의 긴만큼 지연되지 않을 수도 있다는 점이다. 나는 지연을 증가시켜 그 결심이 무엇인지를 알게 될 것이다.

Answer 1

지연을 1 초로 늘리면 문제가 해결됩니다. 아마도 거기에는 좀 더 우아한 해결책이있을 것입니다.

내 코드는 다음과 같습니다. 인스턴스화보다는 클래스 선언 레벨에서 디 바운스 된 함수를 정의했기 때문에 각 인스턴스에 별도의 타이머를 제공하는 대신 뷰의 모든 인스턴스간에 타이머가 공유되므로 구조를 조금 변경했습니다.

var ListItemButtonView = Marionette.ItemView.extend({ 
    tagName: 'button', 
    className: 'listItem-button', 

    events: { 
     'click': '_onClick', 
     'dblclick': '_onDblClick' 
    }, 

    initialize: function() { 
     // Debounced to defend against accidental/spam clicking. Bound in initialize because 
     // the debounce timer will be shared between all ListItemButtonViews if bound before initialize. 
     this._debounceOnClickAction = _.debounce(this._doOnClickAction.bind(this), 1000, true); 
    }, 

    _onClick: function() { 
     this._debounceOnClickAction(); 
     // Don't allow click to bubble up since handling click at this level. 
     return false; 
    }, 

    _onDblClick: function() { 
     this._debounceOnClickAction(); 
     // Don't allow dblClick to bubble up since handling click at this level. 
     return false; 
    }, 

    _debounceOnClickAction: null, 

    _doOnClickAction: function() { 
     if (!this.$el.hasClass('disabled')) { 
      this.doOnClickAction(); 
     } 
    } 
});