JavaScript函数中加载Spinner不显示问题求助

你的Spinner无法正常显示的核心原因是AJAX请求是异步执行的：insertDataToDatabase函数会在发起所有AJAX请求后立刻返回，主线程紧接着就执行spinner.style.display = "none"，导致Spinner刚被显示就被隐藏，肉眼完全看不到。另外代码还有两个潜在问题：循环变量i未用let声明会引发闭包问题，data_noheader未声明会变成全局变量。

修改后的代码 #

document.getElementById('insert').addEventListener('click', async function(event) {
    event.preventDefault();
    const spinner = document.getElementById("spinner");
    spinner.style.display = "";
    // 等待所有数据插入操作完成
    await insertDataToDatabase(results.data);
    spinner.style.display = "none";
}, false);

function insertDataToDatabase(data) {
    // 声明局部变量，避免全局污染
    const data_noheader = data.slice(1);
    // 存储所有AJAX请求的Promise实例
    const requestPromises = [];

    // 用let声明循环变量，解决闭包导致的变量共享问题
    for(let i = 0; i < data_noheader.length; i++){
        // 将每个AJAX请求包装为Promise
        const requestPromise = new Promise((resolve, reject) => {
            $.ajax({
                url: 'index.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    action: 'import',
                    data: data_noheader[i]
                },
                success: function(response) {
                    resolve(response);
                },
                error: function(response) {
                    // 可根据需求处理错误，比如reject传递错误信息
                    reject(response);
                },
            });
        });
        requestPromises.push(requestPromise);
    }

    // 返回Promise.all，等待所有请求完成后再结束函数
    return Promise.all(requestPromises);
}

关键改动说明 #

• 点击事件改为async函数，通过await等待insertDataToDatabase执行完成，确保Spinner在所有数据插入操作结束后才隐藏。
• 将每个AJAX请求包装成Promise，通过Promise.all等待所有请求完成，保证所有数据都插入数据库后再执行隐藏Spinner的逻辑。
• 使用const/let声明变量，避免全局变量污染和循环变量的闭包问题。

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