我从每个循环中获取数据，所以我得到的响应非常快我需要延迟我尝试了所有的东西（setTimeout），延迟但没有好处。我认为我应该使用不同的方法，但我不知道如何。请任何帮助谢谢。这是我的代码：
var counter = 0;
var dataLength = 0;
function processEachRow(data) {
$("#LoadingImage").show();
var result =
$.ajax({
type: 'POST',
url: '/assessment/omr-evaluation/post-omr-skill-based-career-test.aspx',
data: { row: data },
async: false,
success:
function (data) {
counter = counter + 1;
if (counter < dataLength) {
$("#LoadingImage").show();
}
var arr = new Array();
var names = data;
arr = names.split('^');
//alert(arr);
//console.log(arr);
var userTable = $('#user_table_id');
if (userTable == null || userTable.length == 0) {
var table_html = "<table id='user_table_id'>";
table_html += "<tr><td>Name</td><td>Email</td><td>Phone</td><td>PDf</td></tr>";
table_html += "</table>";
$('#user_table_id').html(table_html);
}
newRow = "<tr><td>" + arr[0] + "</td><td>" + arr[1] + " </td><td>" + arr[2] + "</td><td>" + arr[3] + "</td></tr>";
userTable.append(newRow);
$("#LoadingImage").hide();
},
error: function (result) {
$("#LoadingImage").hide();
alert("Failed From Timeout");
},
})
return result;
}
function processFiles() {
d3.csv(("/assessment/omr-evaluation/uploaded-csv/" + $('#Label2').text()), function (data) {
var dataLength = data.length;
//alert(dataLength);
$.each(data, function (i) {
//var obj = jQuery.parseJSON(data[i]);
var result = '';
result = processEachRow(JSON.stringify(data[i]));
//alert(i + result);
});
})
return false;
}
答案 0 :(得分：0)
请尝试像这样延迟ajax的成功：
// set your delay here, 2 seconds as an example...
var my_delay = 2000;
// call your ajax function when the document is ready...
$(function() {
callAjax();
});
// function that processes your ajax calls...
function callAjax() {
$.ajax({
// ajax parameters here...
// ...
success: function() {
setTimeout(callAjax, my_delay);
}
});
}
答案 1 :(得分：0)
我不得不嘲笑它的很多部分，但是我用一个debounced函数组成了一个成功回调的例子，该函数由Ben Alman的jquery插件提供 - 在这里找到：{{3} }
值得注意的是，如果没有插件，您可以轻松地使用setTimeout和回调以及取消来编写去抖动函数。您还可以在许多流行的功能样式库中找到一个，如Underscore或Lodash。
我已经提出了不少评论来尝试解释它，但简而言之：我的successCb函数将通过你的jquery ajax调用的成功函数（我嘲笑，因为我没有服务器发布到） 。它所做的就是将其数据添加到数组中进行处理并调用addRowsToTable函数。由于addRowsToTable函数被去抖动，它只在对它的调用已经停止了几毫秒（在我的例子中为150）时才实际执行。在这种情况下，由于我的假响应时间是20毫秒，所以在所有数据返回后它将只执行一次。最后，由于DOM更新可能会变得昂贵，因此我在循环外一次更新所有可用行，而不是在循环中附加。
其余的几乎都是你已经拥有的嘲讽。
var rows = [];
var pendingRequests = 0;
//these are just for display purposes.
var addRowsCalls = 0;
var addRowsSpan = $('#addRowsCalls');
var successCbCalls = 0;
var successCbSpan = $('#successCbCalls');
function mockAjax(responsePayload, callback, delay) {
//Using this instead of jquery ajax call because I don't have your server-side endpoint.
setTimeout(function() {
callback(responsePayload)
}, delay);
}
/*
the magic of this is in the debounce, which delays the execution of the provided function
until calls to it have stopped by the provided delay period (150ms in this case).
This is provided via this plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/
*/
var addRowsToTable = $.debounce(150, function() {
//these 3 lines should be removed.
addRowsCalls += 1;
addRowsSpan.text(addRowsCalls);
console.log('addRowsToTable called');
var userTable = $('#user_table_id');
var table_html = "";
for (var i = 0; i < rows.length; i++) {
pendingRequests -= 1;
var arr = new Array();
arr = rows[i].split('^');
table_html += "<tr><td>" + arr[0] + "</td><td>" + arr[1] + " </td><td>" + arr[2] + "</td><td>" + arr[3] + "</td></tr>";
}
userTable.html(userTable.html() + table_html);
if (pendingRequests === 0)
$("#LoadingImage").hide();
});
var successCb = function(data) {
//these 2 lines can go as well.
successCbCalls += 1;
successCbSpan.text(successCbCalls);
rows.push(data);
addRowsToTable();
};
function processEachRow(data) {
pendingRequests += 1;
console.log('sent data: [' + data + '] to server');
mockAjax(data.join('^'), successCb, 20); //20ms to simulate a reasonably fast response from the server but still make it perceptible.
}
function processFiles() {
//Replacing this function with a mock version to make it testable without external resources.
var mockData = [
[1, 'Alpha', 'Blue', 'pdf1'],
[2, 'Bravo', 'Green', 'pdf2'],
[3, 'Charlie', 'Red', 'pdf3'],
[4, 'Delta', 'Yellow', 'pdf4'],
[5, 'Echo', 'Purple', 'pdf5'],
[1, 'Alpha', 'Blue', 'pdf1'], //duplicated to inflate data set.
[2, 'Bravo', 'Green', 'pdf2'],
[3, 'Charlie', 'Red', 'pdf3'],
[4, 'Delta', 'Yellow', 'pdf4'],
[5, 'Echo', 'Purple', 'pdf5'],
[1, 'Alpha', 'Blue', 'pdf1'],
[2, 'Bravo', 'Green', 'pdf2'],
[3, 'Charlie', 'Red', 'pdf3'],
[4, 'Delta', 'Yellow', 'pdf4'],
[5, 'Echo', 'Purple', 'pdf5'],
[1, 'Alpha', 'Blue', 'pdf1'],
[2, 'Bravo', 'Green', 'pdf2'],
[3, 'Charlie', 'Red', 'pdf3'],
[4, 'Delta', 'Yellow', 'pdf4'],
[5, 'Echo', 'Purple', 'pdf5'],
[1, 'Alpha', 'Blue', 'pdf1'],
[2, 'Bravo', 'Green', 'pdf2'],
[3, 'Charlie', 'Red', 'pdf3'],
[4, 'Delta', 'Yellow', 'pdf4'],
[5, 'Echo', 'Purple', 'pdf5'],
];
$('#LoadingImage').show();
$.each(mockData, function(itemIndex, itemValue) {
//JSON.stringify the itemValue since that's what your server expects.
//I'm omitting so that I can use join later to fake to carat delimited structure your success callback expects.
processEachRow(itemValue);
});
}
processFiles();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.js"></script>
<p>
Number of times successCb is called: <span id="successCbCalls">0</span>
</p>
<p>
Number of times addRowsToTable is called: <span id="addRowsCalls">0</span>
</p>
<table id="user_table_id">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>PDf</td>
</tr>
</table>
<div id="LoadingImage" style="background-color:red; display:none;">
Loading...
</div>