Question

我有以下代码：

<script>
    $(document).ready(function(){
        $('.runner').click(function(){
            var row_id = $(this).parent().attr('id');
            $('#' + row_id).html("<img src='loader.gif' />");
            //alert("URL: engine_worker.php?start_id=" + row_id);
            // Calls a script that duplicates PushEngine.php
            $.ajax({type:"GET", url:"engine_worker.php?start_id=" + row_id, success: function(text){
                $('#' + row_id).html("DONE");
                $('#' + row_id).parent().remove();
            },error: function(XMLHttpRequest, textStatus, errorThrown){
                // There's been an error
                alert( "NO! Error: " + $textStatus );
            }
            });
        });
    });
</script>

预期的行为是每次单击“runner”类的元素时，具有给定row_id的元素将显示图像作为第一步。这是按预期工作的。然后我希望在后台异步设置一个GET请求到URL，完成后会删除该行，或者如果请求失败则显示警告。 HTML编辑按预期工作，显示图像并在请求完成时删除行。我可以点击很多行，每个行都会显示图像。但是，如果我单击具有相似预期响应时间的行，则完成它们的时间将是 t * 2 而不是 t 。第一行将被删除，然后在预期的时间后第二行将被删除，给出同步操作的外观。是否有某种原因可以观察到这种行为？处理点击事件是否导致第二个等待第一个？

Answer 1

包含 runner 类的DOM元素不是 a html标记？如果是这样，您可能需要将方法preventDefault添加到处理程序中。您的代码应如下所示：

$('.runner').click(function(e){
        var row_id = $(this).parent().attr('id');
        $('#' + row_id).html("<img src='loader.gif' />");
        //alert("URL: engine_worker.php?start_id=" + row_id);
        // Calls a script that duplicates PushEngine.php
        $.ajax({type:"GET", url:"engine_worker.php?start_id=" + row_id, success: function(text){
            $('#' + row_id).html("DONE");
            $('#' + row_id).parent().remove();
        },error: function(XMLHttpRequest, textStatus, errorThrown){
            // There's been an error
            alert( "NO! Error: " + $textStatus );
        }
        });
        e.preventDefault();
    });

Answer 2

尝试使用以下代码替换您的活动附件：

$('#container-id').on('click', '.runner', function(){
    var row_id = $(this).parent().attr('id');
    $('#' + row_id).html("<img src='loader.gif' />");
    //alert("URL: engine_worker.php?start_id=" + row_id);
    // Calls a script that duplicates PushEngine.php
    $.ajax({type:"GET", url:"engine_worker.php?start_id=" + row_id, success: function(text){
        $('#' + row_id).html("DONE");
        $('#' + row_id).parent().remove();
    },error: function(XMLHttpRequest, textStatus, errorThrown){
        // There's been an error
        alert( "NO! Error: " + $textStatus );
    }
    });
});

其中 container-id 是最近的容器DOM元素的id。

希望它有所帮助！

Ajax异步请求按顺序执行

2 个答案: