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)。这将收集符号到数组中，该数组将在上次调用

Answer 2

您可以使用您的名称空间将您的请求推入"全局变量"，然后使用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 );
});

如前所述，这是伪代码，可能不能完全正常工作，但它应该可以帮助您继续工作。

您可以实现一个计时器，并在第一次单击或更改事件时启动它。随着每次额外的点击或更改事件，您可以重置计时器。此外，对于每个事件，您可以相应地向数组中添加或删除符号值。一旦计时器过期，您将该数组连接为逗号分隔的字符串，并通过ajax将该字符串发回并获得JSON结果。