javascript - 如何在ajax调用正在进行时插入加载gif

Question

我想通过执行 document.getElementById("loading").classList.remove("hidden") 来显示加载 gif，同时调用的 ajax 正在进行中。我想在 ajax 完成后不久和在 alert(responce) 之前再次添加类 hidden 我应该在我的代码中添加什么样的代码？附注其余代码现在工作正常。谢谢。

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID,
                       'pid' : playerID,
                       'movename' : moveNameID};
    var ajaxPromise = new AjaxPostPromise("url", postParams);
    ajaxPromise
        .then( function(response) {
            alert(response)
         })
        .catch( function(errorMessage){
            alert(errorMessage);
        });
}

Answer 1

我认为您已经回答了自己的问题。在用于进行 ajax 调用的同一函数中显示加载 gif，然后在返回 promise 后再次隐藏它

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID,
                       'pid' : playerID,
                       'movename' : moveNameID};
    var ajaxPromise = new AjaxPostPromise("url", postParams);
    //show your loading gif as you make your ajax call
    document.getElementById("loading").classList.remove("hidden");
    ajaxPromise
        .then( function(response) {
            // hide the gif after the promise is returned, whether successful or not
            document.getElementById("loading").classList.add("hidden");
            alert(response)
         })
        .catch( function(errorMessage){
            // here too (in case the request failed)
            document.getElementById("loading").classList.add("hidden");
            alert(errorMessage);
        });
}