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(function() { 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