Question

我希望在调用此ajax时正在执行document.getElementById("loading").classList.remove("hidden")来显示加载gif。我想在ajax完成之后和hidden之前不久再添加一个类alert(responce)。我应该在代码上添加什么样的代码？附：其余代码现在正常工作。感谢。

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后再次隐藏它

viewDidScroll

Answer 2

使用disposer pattern创建更干净的代码：

function withSpinner(fn, el = document.getElementById("loading")) {
   spinner.classList.remove("hidden");
   return fn().always(() => spinner.classList.add("hidden"));
}

哪个woud允许您从实际代码中抽象处理：

function move(moveName, gameID, playerID){
    var moveNameID = moveName.replace(/\s+/g, "").toLocaleLowerCase();
    var postParams = { 'guid' : gameID, 'pid' : playerID, 'movename' : moveNameID};
    return withSpinner(() => {
      return new AjaxPostPromise("url", postParams);
    }).then(results => {
      // do something with results, spinner hidden automatically
    });
}

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

2 个答案: