Store load가 완료되지 않은 시점에 다시 load가 들어온다면

Load 다중 발생

프론트를 개발하다보면 항상 예상치 못한 문제점을 마주치곤 한다.
예를 들면, 트리 리스트 또는 그리드에서 사용자가 키보드 입력으로 빠르게 이동 할 시 해당 이벤트 마다 Store에 load 이벤트가 있다면? 만약 전에 발생한 load가 데이터가 많아 늦게 도착했다면 화면에 보여지는 데이터가 선택된 항목의 값이 아닌 이전에 선택된 항목의 값이 나올 수 있다. (데이터를 load하는 Store가 같다는 가정)

해결책은?

1. 키보드 입력 이동을 막는다.
2. 이벤트 발생 buffer를 둔다.
3. 키 입력(키보드 up)이 끝나는 시점에 load 시킨다.
4. 아직 Store가 loading 중이라면 중단 후 새로 load
5. 기타 등등(다른 아이디어는 지금 당장 안떠오름.)

내가 사용한 방법은 2가지

• select 이벤트 발생 buffer른 둔다.
• 아직 store가 loading 중이라면 중단 후 새로 load

먼저 store의 beforeload 이벤트에서 처리

// store가 로딩 중이면 로딩 중인 작업 취소
if (store && store.isLoading()) {
  const proxy = store.getProxy();
  if (proxy) {
    proxy.abort();
  }
}

이벤트 buffer

selectionchange: {
  buffer: 100,
  fn: 'onSelectChange'
}

더 좋은 방법이 있다면 댓글에 알려주세요!

제발