Javascript等待外部ajax请求答案

【问题标题】：Javascript wait for extern ajax requestJavascript等待外部ajax请求
【发布时间】：2017-07-05 19:09:34
【问题描述】：

我基于 primefaces 数据表做了一个简单的滚动内容加载功能：

PF('tableWidget').jq.bind("scrollstop", function() { 
    var t = PF('tableWidget');
    if(t.jq.scrollTop() + t.jq.height() >= t.jq.children().height()) {
        var rows = t.jq.find('tr');                       //save current rows
        $.ajaxSetup({async: false});                      //ajax set sync
        t.paginator.setPage(t.paginator.cfg.page + 1);    //framework pagination function with an ajax call inside (and other stuff) to get new rows
        rows.prependTo(t.jq.find('tbody'));               //AFTER pagination, add old rows
        $.ajaxSetup({async: true});                       //ajax set async again
    } 
});

解释：当用户向下滚动到数据表的底部时，我只是使用分页，但保存之前的旧行。完成分页后，我再次添加行。这留给了一个超级酷的基于滚动的加载，其中只需要从服务器加载新数据，而不是再次加载旧内容。

但正如我在其他问题中所读到的，使用同步 ajax 调用是不好的做法。

重写“t.paginator.setPage(x)”函数并不容易，因为在这个函数中任何地方都有ajax调用。

有没有办法包装整个函数，并为其添加一些成功回调，而无需深入了解真正的基本 ajax 调用？

非常感谢！

【问题讨论】：

标签： javascript jquery ajax primefaces pagination

【解决方案1】：

您可以让 setPage 返回 $.ajax 承诺并在承诺回调中执行您需要的操作。

t.paginator.setPage = function(pageNum){
  // return the promise
  return $.ajax(....);
};

然后当你调用它时：

t.paginator.setPage(t.paginator.cfg.page + 1).then(function(){
   rows.prependTo(t.jq.find('tbody'));  
});

【讨论】：

感谢您的回答，但在这里您将覆盖 setPage 函数。它已经在具有许多不同函数调用的框架中实现，其中一个调用是 ajax 调用。有没有办法包装setPage函数并获取ajax调用事件？假设有一些绑定或其他任何东西。
不，不是……这就是异步编码的本质。您可以尝试使用像 $( document ).ajaxSuccess() 这样的全局方法并检查使用的 url 或其他一些表明它与寻呼机相关的设置
谢谢，我已经尝试将 ajaxSuccess 绑定到 dataTable（分页器的父级），但没有触发事件。
需要再次表示感谢，您的意见帮助我找到了完美的解决方案！！！我会把它作为答案发布

【解决方案2】：

这是我的解决方案：因为我需要访问分页器 onsuccess 或 oncomplete 方法，所以我现在使用 primefaces dataTable 的给定 ajax 侦听器。基于滚动的内容加载系统的整个代码如下所示：

<p:dataTable id="table" value="#{items}" var="item" paginator="true" widgetVar="tableWidget">
    <p:ajax event="page" onstart="storeRows()" oncomplete="restoreRows()"/>
    ...
</p:dataTable>

<h:outputScript>
    <!-- variables -->
    var rows;

    <!-- scroll bottom to load more -->
    PF('tableWidget').jq.bind("scrollstop", function() { 
        var t = PF('tableWidget');
        if(t.jq.scrollTop() + t.jq.height() >= t.jq.children().height()) {
            t.paginator.setPage(t.paginator.cfg.page + 1);
        } 
    });

    <!-- store and restore rows -->
    function storeRows() {
        var t = PF('tableWidget');
        rows = t.jq.find('tr'); 
    }

    function restoreRows() {
        var t = PF('tableWidget');
        rows.prependTo(t.jq.find('tbody'));
    }
</h:outputScript>

【讨论】：