时间戳

首页 > 解决方案 > jquery 同步 ajax 仅在循环结束时附加到 html

javascript - jquery 同步 ajax 仅在循环结束时附加到 html

问题描述

我需要多次运行 php 脚本，但需要使用唯一的 ID。该脚本每次运行需要 +- 5 秒（将一些文件下载到服务器等..）首先我使用 ajax 调用来执行此操作，但问题是这需要按顺序进行，并且使用默认的 ajax 设置多个实例被运行的同时给出了奇怪的东西。我将参数 'async' 更改为 'false' 解决了这个问题，因为现在 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>

标签： javascriptjqueryajax

解决方案

这是因为浏览器的 UI 线程被 ajax 请求占用，所以浏览器没有机会重新绘制页面。这就是为什么要避免使用同步 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函数，这样您就可以编写异步运行的同步代码：

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函数返回的 promise 做任何事情）。

推荐阅读