Javascript游标：事件序列

Question

我一直在搜索，但找不到与我的问题相关的任何内容。我需要在用户启动操作时更改光标，这样他们就不会乱发请求。

更改光标的语句很简单，但我无法将其正确地放入序列中。在函数完成之前，我的光标不会改变。我可以通过注释掉 return 游标到正常行为的语句来看到这一点。

我希望光标继续等待并保持这种状态，直到调用 ajax 函数完成，然后 return 恢复正常。

// wrapper to set wait cursor during ajax calls (the cursor change doesn't work, btw -- leaving it here so it can be fixed)
function loadForm(){
    setTimeout("document.getElementsByTagName('BODY')[0].style.cursor = 'wait'",1);
    populateReadPage();
    setTimeout("document.getElementsByTagName('BODY')[0].style.cursor = 'auto'", 1);
}

// configure calls to populate entire page: first string identifies the call, the second string identifies the custom function to implement
function populateReadPage(){
    setScreenObject("noncom","grid1");
    setScreenObject("cur_cert","grid2");
    setScreenObject("cur_hecm","grid3");
    setScreenObject("prev_cert","grid4");
    setScreenObject("prev_hecm","grid5");
}

Answer 1

Javascript执行的是single-threaded，所以执行loadForm函数时是这样的：

setTimeout(Action1,1) : Action1 在当前（主）执行行完成时排队等待执行
populateReadPage() : 执行此方法
setTimeout(Action2,1) ：同样，当当前（主）执行行完成时，Action2 被排队等待执行。
主线没有别的，Action1执行
Action2被执行

UPDATE：经过一些研究，似乎 body 样式更改需要设置 "pause"，所以我让它与以下代码：

function loadForm(){
  document.body.style.cursor = 'wait'; //sets the cursor to wait

  setTimeout(()=> { //enqueues the tasks
     populateReadPage();
     document.body.style.cursor = 'auto'; //once all is done, sets the regular pointer
  });
}

只有一件事：光标在移动之前不会改变，不知道为什么

Answer 2

这有点话题转换...我说服他们让我使用 jQuery。

正如我在顶部所说的；我想要做的就是将光标设置为 "wait"，然后执行我的异步任务，然后将其设置回 "auto"。下面的代码是我现在拥有的，它似乎可以工作，（绘制直到获取之后才发生）但是光标似乎永远不会改变。

到目前为止，没有任何东西（包括接受的答案）对我有用。

这是我当前的代码。

function setWait(){
    if(document.body.style.cursor = 'wait'){
        return this;
    }
}
function setAuto(){
    document.body.style.cursor = 'auto';
    return this;
}

function loadForm(){
    setWait();
    setTimeout(function() {
        $.when(setScreenObject("prev_cert"),setScreenObject("noncom"), setScreenObject("cur_cert")).done(function() {parseResults();});
    setAuto();
    });
}

function setScreenObject(str1){
    // if "_user" exists use url 1 (counselor view), otherwise use url2 (hud/contractor view)
    if(document.getElementById('_user')){
        url="/clas/html/f17counselor_emp_req_db.cfc?method=getAgencyList&qCode=" + str1 + "&uid=" + document.getElementById('_user').value;
    } else {
        url="/clas/html/f17counselor_emp_req_db.cfc?method=getAgencyList&qCode=" + str1 + "&uid=&cid=" + document.getElementById('_identry').value;
    }
    $.ajax({
        type : 'GET',
        url : url,
        async : false,
        success : function (json) {
        switch(str1) {
            case "noncom":
                noncom = json;
            break;
            case "cur_cert":
                cur_cert = json;
            break;
            case "prev_cert":
                prev_cert = json;
            break;
            default:
                sysFault = true;
                displayError();
            }
        },
        error : function () {
            sysFault = true;
            displayError();
            },
        });
}

Javascript游标：事件序列

Javascript cursor: sequence of events

javascript

ajax

cursor