Question

我的页面在页面加载过程中发出了ajax调用，响应时间约为5秒

我从ajax调用中获取结果并将其存储在隐藏的div中。

现在在呈现页面之后，有一个表（JQuery Datatable），并且每个表行都有一些操作按钮（查看，编辑，删除），用户可以单击。

其中一些操作需要div中的数据。

因此，如果用户在Ajax完成之前单击任何这些操作，则该操作将失败，但是在Ajax调用完成的情况下将可以正常工作。

我可以在这些调用/代码中添加一个等待/睡眠逻辑，以便如果使用者单击操作，它只是等待AJAX响应，而不是将操作按钮启用为回调或失败，并且用户没有再次单击该按钮。

我尝试添加具有setTimeout逻辑的函数，但这会破坏我的模型。

Ajax呼叫

    $.ajax({
        url: "ajax?AJAXKeyword=keyword",
            success: function(result){
                $(document).ready(function () {
                    $( "#div" ).html( result );
            });


          }
          })

需要数据的OnClick操作

                .on('click', 'a.show-row', function( e ) {
                    e.preventDefault();

                    doPoll1();
                })

function doPoll1(){

            if( $("#div").text().length == 0) {
                setTimeout(doPoll1,1000);
            } else {
            === myActions ===
            }
        }

我希望在没有数据的情况下休眠/等待JS代码的执行。

Answer 1

您可以轻松地执行操作，即显示一个加载图标并禁用按钮，直到ajax加载为止。

function waiting(btnState){
  $('btn.waitAjaxXY').attr("disabled", btnState);
  if(btnState)
   $('displayLoadGif').show()
  else
   $('displayLoadGif').hide()
}

$.Ajax({...... waiting(true)}).always(function(){waiting(false)})

这个例子很原始，但我希望它对您有帮助。最好向用户展示为什么他们不能按该按钮，以及如果不执行我所要求的操作，会令人沮丧的时间有多久。

Answer 2

因此您有2个不同的ajax调用，一个加载数据表，另一个加载Div。

在这种情况下

1先加载div，然后再调用Datatable

2默认情况下禁用所有按钮，并在加载Div时启用。将divLoaded变量全局保持为布尔值。在这种情况下，用户将无法单击按钮。

3跟踪在加载Div和加载div之前单击的所有按钮的情况，对单击的行记录进行操作。

如果您在Datatable中有数据，请自行调用。这是通过单击按钮获取行数据的方法。

您可以从Datatable API本身获取单击的行数据，而不必将数据保存在单独的Div中，这将避免ajax加载调用问题。

样本编辑行事件：

react-native run-android

$('.dt-edit').each(function () { $(this).on('click', function(evt){ $this = $(this); var dtRow = $this.parents('tr'); $('div.modal-body').innerHTML=''; $('div.modal-body').append('Row index: '+dtRow[0].rowIndex+'<br/>'); $('div.modal-body').append('Number of columns: '+dtRow[0].cells.length+'<br/>'); for(var i=0; i < dtRow[0].cells.length; i++){ $('div.modal-body').append('Cell (column, row) '+dtRow[0].cells[i]._DT_CellIndex.column+', '+dtRow[0].cells[i]._DT_CellIndex.row+' => innerHTML : '+dtRow[0].cells[i].innerHTML+'<br/>'); } $('#myModal').modal('show'); }); });将包含该特定行所需的所有字段。

请参阅this进行演示

Javascript：在启动用户触发的操作之前，请等待AJAX调用完成

2 个答案:

Javascript：在启动用户触发的操作之前，请等待AJAX​​调用完成

2 个答案:

Javascript：在启动用户触发的操作之前，请等待AJAX调用完成