有没有办法中止 SlickGrid 异步渲染？答案

【问题标题】：Is there a way to abort a SlickGrid asynchronous render?有没有办法中止 SlickGrid 异步渲染？
【发布时间】：2010-08-05 04:28:44
【问题描述】：

我有一个搜索页面，其结果在 SlickGrid 中呈现。这是一个执行onkeyup 的ajax 搜索，因此可以执行搜索，调用Slick.Grid 实例的render，并在第一个异步render 完成之前返回另一个结果。我想在第二个 ajax 请求返回后立即取消最初的 render，这样就不会同时发生两个 render 调用。

用示例编辑：

这就是我正在做的事情，使用alerts 来跟踪执行顺序。

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(); });

当我在userInputField 文本字段中快速连续键入两个数字时，我会按此顺序收到以下警报：

1
1
2

【问题讨论】：

你能详细说明你是如何让这种行为发生的吗？ 1) 浏览器 JS 执行是单线程的，所以实际上没有任何事情可以同时发生。 2) 在几乎所有情况下，对 grid.render() 的 API 级调用都会导致对 renderRows() 的同步调用，因为在您释放键盘键时滚动位置没有改变。

标签： javascript jquery slickgrid

【解决方案1】：

您的页面上一定还有其他内容。您列出的示例是不可能的 - JavaScript 执行永远不会被触发的事件中断。在当前代码执行完毕后，事件才会排队并被事件循环拾取。您在示例中看到的是 1212。

您需要限制 AJAX 调用并取消之前调用的回调，因为您的 AJAX 响应可能会出现乱序，并且旧的搜索结果可能会覆盖新的搜索结果。

【讨论】：

小修正：只有在调用 .setItems() 在第一次 Ajax 调用时抛出异常时才有可能。
虽然 Firefox 没有抱怨，但 IE8 对 DataView 的 refreshIdxById 方法给出以下异常：消息：'items.length' 为空或不是对象行：65 字符：28 代码：0 URI ：localhost/javascript/slickgrid/slick.model.js
@Tin：我正在缓存 XMLHttpRequest 并在运行新搜索之前中止它（如果它正在进行），但这似乎并没有阻止双重渲染。我正在进一步调查，看看我的代码中是否还有其他问题。
我的猜测是，在第一个 Ajax 调用响应中，您没有得到有效的数据。尝试将“结果”记录到控制台。
@Tin：非常感谢......你为我节省了很多时间和头发拉扯。当我取消 XHR 请求时，IE 似乎返回了一个空/null 结果。