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 alerts 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