Question

我需要多次运行php脚本，但是必须使用唯一的ID。每次运行该脚本需要+-5秒（将一些文件下载到服务器等。）首先，我使用ajax调用来执行此操作，但是问题是这需要按顺序进行，并且使用默认的ajax设置，同时运行多个实例会产生奇怪的结果。我将参数“异步”更改为“假”，从而解决了该问题，因为现在javascript等待脚本完成后才开始下一次迭代。

控制台警报每5-6秒弹出一次，我从每条帖子中发回警报数据，循环等待我单击警报（好）。

我没有发出警报，而是尝试将数据追加到div，而是仅在完成所有迭代后才追加。

为什么？

    	 var arr = ["10","20","30"];
       
        $("button").click(function(){
        	$.each(arr, function( index, value ) {
    	 		 console.log( index + ": " + value );
    	 		 $.ajax({
    		        url: "import_xml_single_post.php",
    		        type: "post",
    		        data: {'import_id' : value},
    		        async: false,
    		        success: function(data){
    		        	$( "#result" ).append( data );
    			     	//alert(data);
    			    }     
    		    });
      });

<body>
<button>Click me</button>
<div id="result"></div>
</body>

Answer 1

这是因为ajax请求占用了浏览器的UI线程，因此浏览器没有机会重新绘制页面。这就是为什么要避免使用同步ajax的原因之一。

这些请求无需同步。如果您希望它们以串行方式（而不是并行方式）完成，则在您完成前一个请求时触发下一个请求：

var arr = ["10", "20", "30"];

$("button").click(function() {
    var index = 0;
    // Start the process
    doOne();
    function doOne() {
        // Get this value
        var value = arr[index++];
        console.log(index + ": " + value);
        $.ajax({
            url: "import_xml_single_post.php",
            type: "post",
            data: {
                'import_id': value
            },
            success: function(data) {
                $("#result").append(data);
            },
            complete: function() {
                // Kick off the next request
                if (index < arr.length) {
                    doOne();
                }
            }
        });
    }
});

在最先进的环境（或带有转译）中，您可以使用async function，以便编写可以异步运行的具有同步外观的代码：

var arr = ["10", "20", "30"];

$("button").click(async function() {
// ---------------^^^^^
    try {
        for (const value of arr) {
            console.log(value);
            await $.ajax({
    // -----^^^^^^
                url: "import_xml_single_post.php",
                type: "post",
                data: {
                    'import_id': value
                },
                success: function(data) {
                    $("#result").append(data);
                }
            });
        }
    } catch (e) {
        // Handle/report error doing request
    }
});

在整个函数主体中使用try / catch非常重要，因为否则将无法处理ajax调用中的错误（因为jQuery中没有任何作用带有async函数返回的承诺的任何内容。

jQuery同步Ajax仅在循环结束时追加到html

1 个答案: