通过AJAX统计目录图片数量后无法更新JS变量的问题

这是AJAX异步特性导致的：默认情况下AJAX请求不会阻塞后续代码执行。你调用countImages()后，浏览器会立刻发起请求，但同时直接执行后面的console.log('imgcount: '+imgcount)——这时候success回调还没触发，imgcount还是初始的0。而success里的console.log是在请求成功返回数据后才执行的，所以能正确统计到23。

下面是几种靠谱的处理方式，确保你能在统计完成后再使用imgcount：

方法1：用回调函数传递结果 #

把需要用到统计结果的逻辑放进回调里，或者传入一个回调函数：

var url = 'content/images/'; 
var imgcount = 0; 

function countImages(callback){
    $.ajax({
        url : url,
        type: "GET",
        success: function (data) {
                $(data).find("a").attr("href", function (i, val) {
                    if( val.match(/\.(jpg|png|gif)$/) ) {                   
                        imgcount++;
                    }
                });
                console.log('imgcount: '+imgcount); // 返回23
                // 调用回调，把统计结果传出去
                callback(imgcount);
        }
    });
}

// 调用时传入回调，在回调里使用结果
countImages(function(count){
    console.log('外部使用imgcount: '+count); // 返回23
    // 所有需要用到count的逻辑都写在这里
});

方法2：用Promise处理异步（更现代） #

把AJAX请求包装成Promise，通过then获取结果：

var url = 'content/images/'; 

function countImages(){
    return new Promise(function(resolve){
        $.ajax({
            url : url,
            type: "GET",
            success: function (data) {
                let imgcount = 0;
                $(data).find("a").attr("href", function (i, val) {
                    if( val.match(/\.(jpg|png|gif)$/) ) {                   
                        imgcount++;
                    }
                });
                resolve(imgcount);
            }
        });
    });
}

// 通过then获取统计结果
countImages().then(function(count){
    console.log('imgcount: '+count); // 返回23
    // 后续业务逻辑写在这里
});

方法3：用async/await同步写法（ES2017+） #

基于Promise，用类似同步代码的写法处理异步：

var url = 'content/images/'; 

function countImages(){
    return new Promise(function(resolve){
        $.ajax({
            url : url,
            type: "GET",
            success: function (data) {
                let imgcount = 0;
                $(data).find("a").attr("href", function (i, val) {
                    if( val.match(/\.(jpg|png|gif)$/) ) {                   
                        imgcount++;
                    }
                });
                resolve(imgcount);
            }
        });
    });
}

// 必须在async函数内使用await
async function getImageCount(){
    let count = await countImages();
    console.log('imgcount: '+count); // 返回23
    // 其他需要用到count的逻辑
}

getImageCount();

⚠️ 注意：别用async: false开启同步AJAX，会阻塞浏览器主线程，导致页面卡顿，严重影响用户体验。

内容的提问来源于stack exchange，提问作者Mariano