어떻게 Ajax 요청 을 중복 발송 하 는 것 을 방지 합 니까?

간단 한 수요, 단 추 를 누 르 면 서버 에 자원 을 요청 하고 처리 하지 않 을 때 여러 번 클릭 하면 많은 요청 이 기다 리 고 있 습 니 다.거 친 해결 방법 은 한 번 누 르 면 단 추 를 disable 하 는 것 이다.한 번 더 누 르 면 자동 으로 다운 되 는 더 좋 은 방법 이 있 습 니까?보충: 한 번 의 요청 이 아니 라 gmail 의 전체 역 AJAX 와 유사 합 니 다. 방금 firebug 로 gmail 을 보 았 는데 중복 요청 을 발 견 했 을 때 이전의 요청 상태 가 "Aborted" 로 바 뀌 었 고 데 이 터 를 되 돌려 주지 않 았 습 니 다.어떻게 했 어 요?클 라 이언 트 AJAX 가 보 낸 후에 종료 할 수 없다 는 것 을 일반적으로 이해 하기 때문이다.
 
 
A. 독점 형 제출 은 한 번 의 제출 작업 만 허용 하고 이번 제출 이 완 료 될 때 까지 다음 제출 을 할 수 있 습 니 다.

module.submit = function() { if (this.promise_.state() === 'pending') { return } return this.promise_ = $.post('/api/save') } 

B. 탐욕 형 은 무제 한 제출 을 하지만 마지막 작업 을 기준 으로 한다.즉, 마지막 조작 에 대한 피드백 을 빨리 해 야 하 며, 앞의 조작 결 과 는 중요 하지 않다.

module.submit = function() { if (this.promise_.state() === 'pending') { this.promise_.abort() } // todo } 

예 를 들 어 일부 응용 항목 에 서 는 '좋아 함' 이나 '싫어 함' 과 같은 동작 을 하 는 이 태 버튼 이 있 습 니 다.누 르 고 바로 피드백 을 주지 않 으 면 사용자 의 시선 초점 이 그 버튼 에서 오래 멈 출 수 있 습 니 다.누 를 때 즉시 전환 버튼 의 상 태 를 누 르 고 프로그램 에서 abort 로 적 극적인 제출 을 실현 하면 사용자 체험 도 향상 시 킬 수 있 고 서버 스트레스 도 낮 출 수 있어 기쁘다.C. 절제 형 제출 은 제출 이 아무리 빈번 하 더 라 도 두 번 의 유효 제출 간격 은 반드시 특정한 시간 간격 보다 크 거나 같 을 것 이다.일정 주파수 로 제출 하 는 것 이다.

module.submit = throttle(150, function() { // todo }) 

클 라 이언 트 가 100 밀리초 간격 으로 10 번 의 요청 을 보 내 면 이 모듈 은 그 중 6 개 (타임 라인 거리 당 150 밀리초) 만 받 아 처리 합 니 다.이것 은 검색 충돌 을 해결 하 는 선택 할 수 있 는 수단 이기 도 합 니 다. 예 를 들 어 초고 예 를 들 어 자세히 살 펴 보면 편집기 의 blur 사건 이 즉시 저 장 됩 니 다.단 추 를 저장 하 는 click 이벤트 도 즉시 저장 을 실행 합 니 다.그러나 편집기 내부 에 초점 을 맞 추고 저장 단 추 를 누 르 면 throttle 로 처리 할 수 있 는 경우 가 있 습 니 다.또한 일부 이벤트 처 리 는 throttle 을 자주 사용 합 니 다. 예 를 들 어 resize, scroll, mousemove 등 입 니 다.D. 게 으 름 형 이 두 번 제출 하 는 간격 은 지 정 된 시간 보다 커 야 유효한 제출 을 할 수 있 습 니 다.휴식 을 주지 않 고 일 을 하지 않 는 다.

module.submit = debounce(150, function() { // todo }) 

아니면 초고 의 예 를 들 어 편집기 에서 ctrl + s 를 누 르 면 초 고 를 수 동 으로 저장 할 수 있 습 니 다.만약 당신 이 계속 누 르 면 프로그램 은 왜 당신 이 계속 누 르 려 고 하 는 지 이해 하지 못 할 것 입 니 다. 당신 이 계속 누 르 는 것 을 포기 해야만 계속 할 수 있 습 니 다.더 많은 기억 속 의 예 방식 C 와 방식 D 는 가끔 더 통용 된다. 예 를 들 어 이런 상황 이다.

게임 에서 위력 이 강 한 고속 무 기 를 주 웠 습 니 다. 총알 이 화면 에 직선 으로 떨 어 지 는 것 을 방지 하기 위해 throttle 로 빈 도 를 조절 할 수 있 습 니 다.

탄막 형 게임 에서 사격 키 를 끼 워 서 무 뇌 게임 을 하 는 것 을 방지 하기 위해 debounce 로 주파 수 를 조절 할 수 있다.

컴 파일 작업 에서 데 몬 은 특정한 폴 더 에 있 는 모든 파일 을 감시 합 니 다. (예 를 들 어 모든 파일 의 변경 이 재 컴 파일 을 실행 할 수 있 고 한 번 에 실행 하 는 데 2 초 걸 립 니 다) 그러나 어떤 작업 은 순식간에 대량의 파일 변경 (예 를 들 어 git checkout) 을 초래 할 수 있 습 니 다. 이 때 간단 한 debounce 는 컴 파일 작업 을 한 번 만 수행 할 수 있 습 니 다.

그리고 방식 C 는 방식 B 와 조합 해서 사용 할 수 있 습 니 다. 예 를 들 어 구성 요 소 를 자동 으로 완성 합 니 다 (Google 홈 페이지 의 검색 은 다음 과 같 습 니 다).

사용자 가 텍스트 를 빠르게 입력 할 때 (특히 타자 능수) throttle keypress 이벤트 처리 함 수 를 지정 한 시간 간격 으로 텍스트 필드 의 값 을 추출 한 다음 에 즉시 새로운 조 회 를 진행 할 수 있 습 니 다.

새로운 조회 가 발송 되 어야 하지만 이전 조회 가 결 과 를 되 돌려 주지 않 았 을 때 abort 가 완성 되 지 않 은 조 회 를 즉시 보 낼 수 있 습 니 다.

-- update 2013 - 01 - 08 --- E. 기억 형

var scrape = memoize(function(url) { return $.post('/scraper', { 'url': url }) }) 

같은 매개 변수 에 대해 서 는 항상 결 과 는 같 습 니 다. 매번 같은 대상 으로 돌아 갑 니 다.예 를 들 어 내용 을 붙 일 때 링크 정 보 를 캡 처 하 는 편집기 가 있 습 니 다. memoize 는 같은 링크 가 두 번 캡 처 되 지 않도록 합 니 다.update 2013 - 03 - 27 --- F. 누적 형 며칠 전에 자동 으로 사건 을 처리 할 때 이 함 수 를 얻 었 습 니 다. 연속 적 인 사건 을 처리 하 는 데 도 사용 할 수 있 습 니 다. 예 를 들 어 연속 적 인 여러 번 의 제출 을 하나의 제출 로 합 칠 수 있 습 니 다. 예 를 들 어:

var request = makePile(5, function() { $.post('/', { list: JSON.stringify([].slice.call(arguments)) }) }) //        request({a:1}), request({a:2}), request({a:3}), request({a:4}), request({a:5}) /* post => list:[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5}]  */ 

샘플 구현:

var makePile = function(count, onfilter, onvalue) { var values = [], id = function(value) { return value } return function(value) { values.push((onvalue || id).apply(this, arguments)) if (values.length === count) { onfilter.apply(this, values) values = [] } } } 

- update 2013 - 04 - 16 - 다른 누적 은 횟수 가 아 닌 시간 에 따라 이 루어 집 니 다. 예 를 들 어 행위 통계 에 응용 하면 순식간에 수 십 수백 개의 유사 한 행 위 를 수집 할 수 있 습 니 다. 이 때 위 에 있 는 pile 의 구조 에 debounce 를 더 해서 대량의 중복 요 구 를 방지 할 수 있 습 니 다 (그러나 그 어떠한 통계 도 잃 어 버 리 지 않 습 니 다).

var trackFactory = function(delay, action) { var params = [], slice = [].slice var touch = debounce(delay, function() { if (params.length) { action(params) params = [] } }) return function() { params.push(slice.call(arguments)) touch() } } var track = trackFactory(550, function(params) { // send tracking request }) 

G. 샘플링 형 은 최근 재 구성 할 때 연 상 된 것 으로 위 와 다른 재 구성 작업 으로 자동 로드 (timeline) 행위 제어 에 사용 할 수 있 습 니 다.

autoload.listen(feeds, 'next', sample(3, function() {

  this.enable()

}))

Sample 이 경화 선택 함수 (n 선택 1) 라면 실제로 이렇게 작 동 합 니 다.

O-O-X-O-O-X

그러나 '자동 불 러 오기' 의 응용 은 (두 번 자동, 한 번 수 동) 을 원 할 수 있 습 니 다.

X-X-O-X-X-O

이 경우 설정 의 선택 함수 로 제어 할 수 있 습 니 다.

options { sample: (n) => n % 3 !== 0 }

즉, 다음 로 딩 이 완료 되면 세 번 에 두 번 씩 다음 로 딩 에 대해 자동 으로 로 딩 을 실행 합 니 다.