Javascript:多个事件,一个ajax请求
我对JS有点陌生,我正试图想出在我正在开发的应用程序中设计异步交互的最佳方法 我有一个与一些实时API支持的数据相关的记录列表。我向用户显示这些记录的列表,用户可以选择他们想要查看更多信息的特定记录。我通过ajax调用从API加载这些附加数据 为了让这成为一个更真实的例子,让我们假设我有一个股票列表。我知道每只股票的名字和昨天的收盘价。每个股票名称旁边都有一个复选框,如果用户选中该复选框,它会在图表上绘制过去一年股票的历史价格 当用户以这种方式选择一只股票时,行为很简单。我为一只股票的历史数据发送一个API请求,并将其绘制在图表上 然而,用户可以一次选择一组股票,或者快速连续选择。我不想背靠背地发出10个、20个或50个请求,我想对10个、20个或50个股票历史记录发出一个请求 假设我的应用程序有一个事件侦听器,当选中该复选框时,它会查找股票历史记录,如下所示:Javascript:多个事件,一个ajax请求,javascript,ajax,event-handling,Javascript,Ajax,Event Handling,我对JS有点陌生,我正试图想出在我正在开发的应用程序中设计异步交互的最佳方法 我有一个与一些实时API支持的数据相关的记录列表。我向用户显示这些记录的列表,用户可以选择他们想要查看更多信息的特定记录。我通过ajax调用从API加载这些附加数据 为了让这成为一个更真实的例子,让我们假设我有一个股票列表。我知道每只股票的名字和昨天的收盘价。每个股票名称旁边都有一个复选框,如果用户选中该复选框,它会在图表上绘制过去一年股票的历史价格 当用户以这种方式选择一只股票时,行为很简单。我为一只股票的历史数据发
$('input.stock_toggle').change( function(event){
var symbol = $(this).data('symbol');
lookupStockHistory(symbol);
});
我如何定义一个lookupStockHistory
函数,或者其他类型的事件监听器等,它将等待一秒钟并汇集所有传入的事件以发送单个请求,而不是连续多次触发
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秒后处理
要触发,只需调用
lookupStockHistory(symbol)
。这将把符号收集到数组中,该数组将在上次调用后1秒后处理您可以实现一个计时器,并在第一次单击或更改事件时启动它。每增加一次点击或更改事件,您就可以重置计时器。此外,对于每个事件,您可以相应地向数组添加或删除符号值。计时器过期后,您将数组加入为逗号分隔的字符串,并通过ajax将其发回并获得JSON结果。您可以实现一个计时器,并在第一次单击或更改事件时启动它。每增加一次点击或更改事件,您就可以重置计时器。此外,对于每个事件,您可以相应地向数组添加或删除符号值。计时器过期后,您将数组加入为逗号分隔的字符串,并通过ajax将其发回并获得JSON结果。您可以使用将请求推入命名空间中的“全局变量”,然后使用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 );
});
如前所述,这是一种伪代码,可能无法正常工作,但它应该可以让您继续工作。您可以使用将请求推入命名空间中的“全局变量”,然后使用
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 );
});
如前所述,这是一种伪代码,可能无法正常工作,但它应该可以让您继续工作。在您的股票列表中,您可以通过点击处理程序获取信息吗?(例如:你选择你想要过去历史记录的股票,然后点击一个按钮来拉取过去的历史记录)你怎么能有多个
。股票切换
同时触发“更改”?爆炸药丸:不是完全相同的时间,而是用户可以选择多个的速度。或者-如果有一个“全部选中/全部取消选中”选项。@tymeJV这可能是一个选项,我认为当用户选中复选框并立即看到复选框的含义时,UI会感觉更直观(在本例中显示股票历史)。在你的股票列表中,你能通过点击处理程序提取信息吗?(例如:你选择你想要过去历史记录的股票,然后点击一个按钮来拉取过去的历史记录)你怎么能有多个。股票切换
同时触发“更改”?爆炸药丸:不是完全相同的时间,而是用户可以选择多个的速度。或者-如果有一个“全部选中/全部取消选中”选项。@tymeJV这可能是一个选项,我认为当用户选中复选框并立即看到复选框的含义时,用户界面会感觉更直观(在本例中显示股票历史)。这很有意义,您介意解释一下符号:var lookupStockHistory=(function(){…return add;}());
正在做什么?这是在调用lookupStockHistory调用匿名函数内部的add函数吗?对该模式不太熟悉。这是变量的包装器。它执行什么操作(function(){…}())此函数正在设置所有必需的变量和函数,并仅公开可从全局范围访问的add函数-return add;-这很酷,我很喜欢。感谢您的建议!这很有意义,您是否介意解释一下表示法:var lookupStockHistory=(function(){…return add;}())
正在做什么?这是在打电话吗