자바 스크립트 : 여러 이벤트, 하나의 아약스 요청

Question

저는 JS에 다소 익숙하며, 제가 연구중인 애플리케이션에서 비동기식 상호 작용을 설계하는 가장 좋은 방법을 생각하려고합니다.

일부 실제 API 지원 데이터와 관련된 레코드 목록이 있습니다. 사용자에게이 레코드의 목록을 보여주고 사용자는 더 많은 정보를보고자하는 특정 레코드를 선택할 수 있습니다. 아약스 호출을 통해 API에서이 추가 데이터를로드합니다.

더 현실적인 예를 만들기 위해 주식 목록을 갖고 있다고 가정 해 봅시다. 나는 각 주식에 대해 이름과 어제 종가를 얻었다. 각 주식 이름 옆에 확인란이 있습니다. 사용자가이 상자를 선택하면 지난 해의 주식 가격이 그래프로 그려집니다.

사용자가 도중에 하나의 주식을 선택하면 동작이 간단합니다. 한 주식에 대한 과거 데이터에 대한 API 요청을 하나씩 보내 그래프로 그려 봅니다.

그러나 사용자는 한꺼번에 대량의 주식을 신속하게 선택할 수 있습니다. 10 개 또는 20 개 또는 50 개의 요청을 연속적으로 실행하고 싶지 않습니다. 10 개 또는 20 개 또는 50 개의 재고 내역을 하나씩 요청하고 싶습니다.

과 같이의 내 응용 프로그램이 확인란이 전환 될 때 주식 내역을 조회 이벤트 리스너를 가지고 말할 뭔가를 보자

$('input.stock_toggle').change(function(event){ 
    var symbol = $(this).data('symbol'); 
    lookupStockHistory(symbol); 
}); 

을 나는 lookupStockHistory 함수 또는 이벤트의 다른 종류를 정의 할 수있는 방법 청취자 등, 그것은 두 번째를 기다리고 연속적으로 여러 번 발사하는 대신 단일 요청을 보내기 위해 들어오는 모든 이벤트를 저장합니다.

Answer 1

var lookupStockHistory = (function() { 
"use strict"; 
var qeue = [], timeoutHandler = null, timeoutTime = 1000, 
    sendCall = function() { 
     //process qeue array and trigger ajax call 
     //and clean qeue 
     qeue = []; 
    }, 
    add = function (symbol) { 
     if (timeoutHandler) { 
      clearTimeout(timeoutHandler); 
      timeoutHandler = null; 
     } 
     qeue.push(symbol); 
     timeoutHandler = setTimeout(sendCall, timeoutTime); 
    }; 
return add;}()); 

트리거하려면 lookupStockHistory(symbol)을 호출하십시오. 그러면 마지막 호출 이후 1 초 후에 처리 될 배열에 심볼이 수집됩니다.

Answer 2

타이머를 구현하고 첫 번째 클릭 또는 변경 이벤트로 시작할 수 있습니다. 추가 클릭 또는 변경 이벤트가있을 때마다 타이머를 재설정 할 수 있습니다. 또한 각 이벤트에 따라 배열에 기호 값을 추가하거나 제거 할 수 있습니다. 타이머가 만료되면 쉼표로 구분 된 문자열로 배열에 가입하고이를 ajax를 통해 게시하고 JSON 결과를 얻습니다.

Answer 3

네임 스페이스로 요청을 "전역 변수"에 넣은 다음 setTimeout을 사용하여 AJAX 호출을 지연시킬 수 있습니다 (두 번째 또는 두 개일까?).

setTimeout은 "전역 변수"에서 요청을 가져 와서 변수를 비운 다음 요청을 구성하는 함수를 호출합니다. 이후에 setTimeout 함수를 호출하면 "전역 변수"가 비어있어 향후 AJAX 요청을 생성하지 않습니다.

아래 예에서 새로운 보류 제한 시간이 제거되면서 현재 대기 제한 시간도 제거합니다.

여기에 선택과 이벤트 캡처 jQuery를 사용하여 의사 코드 예제 :

var DELAY_FOR_INPUT = 2000; // 2 seconds 

var g_MyDataToRequest = []; 
var g_currentAJAXCallTimeout = null; 

function _callAPI = new function() { 
    g_currentAJAXCallTimeout = null; 
    var dataToGet = g_MyDataToRequest; 
    g_MyDataToRequest = []; // clear out global request cache 

    // TODO: Loop over dataToGet and construct AJAX request 
    // TODO: Perform AJAX call... 
} 

$('.myCheckbox').click(function() { 
    var myRequest = $(this).attr("ID"); // or Val(), or whatever you'd like to track your item 
    g_MyDataToRequest.push(myRequest); 

    // If have a pending request, kill it 
    if (g_currentAJAXCallTimeout != null) { 
    clearTimeout(g_currentAJAXCallTimeout); 
    g_currentAJAXCallTimeout = null; 
    } 

    g_currentAJAXCallTimeout = setTimeout(_callAPI, DELAY_FOR_INPUT); 
}); 

이것은, 언급 한 바와 같이, 의사와 잘 작동 권리가되지 않을 수 있습니다,하지만 당신이 가야한다.