Javascript:多个事件，一个ajax请求

Question

我对 JS 有点陌生，我正在尝试思考在我正在开发的应用程序中设计一些异步交互的最佳方法。

我有一个与一些实时 API 支持的数据相关的记录列表。我向用户显示这些记录的列表，用户可以选择他们想要查看更多信息的特定记录。我通过 ajax 调用从 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 秒后进行处理