addEventListener函数中的CSS更改不会在函数退出时应用

Question

我正在尝试在构建动态div时更改光标徽标。根据加载几秒钟需要多少数据，我需要更改光标。

我遇到的问题是光标没有改变，直到我的代码完全执行。

我有一个动态生成的图表，图表中的点设置为在点击时弹出更多数据。这是我创建的eventListener，它除了我的CSS更新之外没有得到应用，直到它退出该函数。

知道如何强迫它立即更新

    point.addEventListener('click', function (evt) {

          document.body.className = 'waiting';
var evtPoint        = document.getElementById(evt.currentTarget.id);
          var index           = evtPoint.id.substring(evtPoint.id.lastIndexOf('-') + 1, evtPoint.id.length);
          var chartOptions    = Charts.options[elementId];


          var txnData     = chartOptions.data.txn[index];
          var txnFullData = chartOptions.data.txnFull;
          var theDate         = new Date(txnData.time);


          // pop up
          var txnsPerMinutePopUp       = document.getElementById('txnsPerMinutePopUp');
          txnsPerMinutePopUp.innerHTML = '<div id = "txnsPerMinutePopUp-bg"></div>' +
                                                 '<div id = "txnsPerMinutePopUp-body">' +
                                                 '<div id = "txnsPerMinutePopUp-body-heading"></div>' +
                                                 '<div id = "txnsPerMinutePopUp-body-txns">';


          var txnsPerMinutePopUpHeading = document.getElementById('txnsPerMinutePopUp-body-heading');
          var txnsPerMinutePopUpBody    = document.getElementById('txnsPerMinutePopUp-body-txns');





          function addZero(i) {
            if (i < 10) {
              i = '0' + i;
            }
            return i;
          }

          for (var i = 0; i < txnFullData.length; i++) {

           // console.log("loop" + i, txnFullData);
            var date = new Date(txnFullData[i].time);
            if (date.getTime() === theDate.getTime()) {

              txnsPerMinutePopUpHeading.innerHTML = '<div class="txnsPerMinutePopUp-body-heading-title">Tweets</div><div class="txnsPerMinutePopUp-body-heading-time">' + addZero(theDate.getHours()) + ':' + addZero(theDate.getMinutes()) + '</div>';

              var child = '<div class = "txnsPerMinutePopUp-txns">' +
                          '<div class = "txnsPerMinutePopUp-txns-img">' +
                          '<object data = "' + txnFullData[i].profile_image_url + '" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" type = "image/jpeg">' +
                          '<img src = "assets/img/engager_profile_default-47.svg" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" alt = "' + txnFullData[i].screen_name + ' profile image" />' +
                          '</object>' +
                          '</div>' +
                          '<div class = "txnsPerMinutePopUp-txns-screen-name">' +
                          '<a href = "https://txn.com/@' + txnFullData[i].screen_name + '" target = "_blank">@' + txnFullData[i].screen_name + '</a>' +
                          '</div>' +
                          '<div class = "txnsPerMinutePopUp-txns-text">' + Charts.lineChart.parseText(txnFullData[i].text) + '</div>' +
                          '</div>';

              txnsPerMinutePopUpBody.innerHTML += child;



            }
          }

          txnsPerMinutePopUp.innerHTML += '</div>' +
                                                  '</div>';

          //document.body.style.cursor='default';

          txnsPerMinutePopUp.style.visibility = 'visible';

          var bg = document.getElementById('txnsPerMinutePopUp-bg');
          bg.addEventListener('click', function (evt) {
            txnsPerMinutePopUp.style.visibility = 'hidden';
          });

    }, false);

我的CSS只是

body.waiting * { cursor: wait; }

更新

从研究潜在原因我发现大多数浏览器不会立即更新DOM，我需要中断javascript以允许DOM更新。

我更新了我的代码，将大部分操作移到一个单独的函数中，并尝试在其上设置超时值，并且在所有操作完成之前仍然不更新游标。

我还尝试添加一个mousedown事件，尝试在点击时跳过javascript，但它也没有用

事件监听

    point.addEventListener('click', function (evt) {

      //document.body.className = 'waiting';

      // setTimeout(function() {
        Charts.lineChart.changeCursor();
      // },10);

      var evtPoint        = document.getElementById(evt.currentTarget.id);
      var index           = evtPoint.id.substring(evtPoint.id.lastIndexOf('-') + 1, evtPoint.id.length);
      var chartOptions    = Charts.options[elementId];


      var txnData     = chartOptions.data.txn[index];
      var txnFullData = chartOptions.data.txnFull;
      var theDate         = new Date(txnData.time);


      function addZero(i) {
        if (i < 10) {
          i = '0' + i;
        }
        return i;
      }

       setTimeout(function() {
          Charts.lineChart.breakOut( txnFullData,theDate );
       },100);


      document.body.style.cursor='default';

      txnsPerMinuteTweetsPopUp.style.visibility = 'visible';



    }, false);

并将以下代码移入分组函数

突围

 Charts.lineChart.breakOut = function(txnFullData,theDate){

    function addZero(i) {
      if (i < 10) {
        i = '0' + i;
      }
      return i;
    }

    var txnsPerMinutePopUp       = document.getElementById('txnsPerMinutePopUp');
    txnsPerMinutePopUp.innerHTML = '<div id = "txnsPerMinutePopUp-bg"></div>' +
      '<div id = "txnsPerMinutePopUp-body">' +
      '<div id = "txnsPerMinutePopUp-body-heading"></div>' +
      '<div id = "txnsPerMinutePopUp-body-txns">';


    var txnsPerMinutePopUpHeading = document.getElementById('txnsPerMinutePopUp-body-heading');
    var txnsPerMinutePopUpBody    = document.getElementById('txnsPerMinutePopUp-body-txns');

    for (var i = 0; i < txnFullData.length; i++) {

      // console.log("loop" + i, txnFullData);
      var date = new Date(txnFullData[i].time);
      if (date.getTime() === theDate.getTime()) {

        txnsPerMinutePopUpHeading.innerHTML = '<div class="txnsPerMinutePopUp-body-heading-title">Tweets</div><div class="txnsPerMinutePopUp-body-heading-time">' + addZero(theDate.getHours()) + ':' + addZero(theDate.getMinutes()) + '</div>';

        var child = '<div class = "txnsPerMinutePopUp-txns">' +
          '<div class = "txnsPerMinutePopUp-txns-img">' +
          '<object data = "' + txnFullData[i].profile_image_url + '" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" type = "image/jpeg">' +
          '<img src = "assets/img/engager_profile_default-47.svg" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" alt = "' + txnFullData[i].screen_name + ' profile image" />' +
          '</object>' +
          '</div>' +
          '<div class = "txnsPerMinutePopUp-txns-screen-name">' +
          '<a href = "https://txn.com/@' + txnFullData[i].screen_name + '" target = "_blank">@' + txnFullData[i].screen_name + '</a>' +
          '</div>' +
          '<div class = "txnsPerMinutePopUp-txns-text">' + Charts.lineChart.parseText(txnFullData[i].text) + '</div>' +
          '</div>';

        txnsPerMinutePopUpBody.innerHTML += child;



      }
    }

    txnsPerMinutePopUp.innerHTML += '</div>' +
      '</div>';

    var bg = document.getElementById('txnsPerMinutePopUp-bg');
    bg.addEventListener('click', function (evt) {
      txnsPerMinutePopUp.style.visibility = 'hidden';
    });

}