I have a search page whose results are rendered in a SlickGrid. It is an ajax search that executes onkeyup
, so it's possible for a search to be performed, the Slick.Grid instance's render
to be called, and have another result come back before the first asynchronous render
completes. I'd like to cancel the initial render
as soon as the second ajax request comes back so that there aren't two render
calls taking place at the same time.
EDIT WITH EXAMPLE:
Here's what I'm doing, with alert
s in place to track the execution order.
function setupGrid() {
slickDataView = new Slick.Data.DataView();
slickGrid = new Slick.Grid(slickGridDiv, slickDataView.rows, slickGridColumns, slickGridOptions);
slickDataView.onRowsChanged.subscribe(function(rows) {
slickGrid.removeRows(rows);
slickGrid.updateRowCount();
slickGrid.render();
});
slickDataView.onRowCountChanged.subscribe(function(args) {
slickGrid.updateRowCount();
slickGrid.render();
});
}
function performSearch() {
jQuery.get('searchPage.php', {MODEL_ID: userInputField.val()},
function(results) {
slickDataView.beginUpdate();
alert(1);
slickDataView.setItems(results);
alert(2);
slickDataView.endUpdate();
}
);
}
setupGrid();
userInputField.keyup(functi开发者_运维问答on() { performSearch(); });
I get the following alerts in this sequence when I type two numbers into the userInputField
text field in quick succession:
1
1
2
There must be something else going on on your page. The example you listed is impossible - JavaScript execution is never interrupted by an event getting fired. The event just gets queued up and picked up by the event loop after the current code is done executing. What you would see in your example, is 1212.
You will want to throttle the AJAX calls and also to cancel the callbacks from the previous calls since your AJAX responses may come back out of order and the older search results can override the newer ones.
精彩评论