I have a scenario where I load data dynamically into a datatable based on a user selection. More specifically, I load data into a "message" datatable, based on user selection in a "list" datatable, so that I am showing the "messages" in a specific "list". I do this by calling reload(), which uses the selected ListID as part of the .data sent to the server.
It works fine, except when I quickly switch between two lists, while the first list's messages didn't finish loading. What happens is that (sometimes) the second requested list gets result faster than the first, which causes the table to render the second results briefly and then as soon as the older (first) call finally is received, it overrides the messages in the table, which causes the table to contain the wrong list's messages.
The desired solution would be to cancel the first .reload() (or specifically, it's XHR), but I don't see anyway to do that. .reload() returns the datatable instance, if I am not mistaken. But I can't see a way to use that to cancel the specific reload. How can I do that? How can I cancel a .reload(), so that a new one I invoke soon after, wont get overwritten?