jQuery改变光标-发生在函数的末尾

Question

我希望在调用函数通过XML搜索以匹配单词时更改光标，以便用户知道正在发生某事。

功能如下:

    function searchResults(query) {
      $("body").css("cursor", "wait");
      var temp = "\b" + query + "\b";
      var regex_query = new RegExp(temp, "gi");
      var currentLine;
      var num_matching_lines = 0;
      var searchCount = 0;
      var matchesLine;
      $("#mainOutput, #searhResults").empty();
      $("LINE", currentContext).each(function () {
        var line = this;
        currentLine = $(this).text();
        matchesLine = currentLine.replace(regex_query, '<span class="query_match">' + query + '</span>');
        if (currentLine.search(regex_query) > 0) {
          searchCount = searchCount + currentLine.match(regex_query).length;
          $('#sideInfo>ul').empty();
          num_matching_lines++
          $("#mainOutput").append("<br /><p class='speaker_match indent'>"+  $(line).parent().find('SPEAKER').text() +"</p>");
          $("#mainOutput").append("<p class='act_match indent'>"+  $(line).parent().parent().parent().children(':first-child').text()+"</p>");
          $("#mainOutput").append("<p class='scene_match indent'>"+  $(line).parent().parent().children(':first-child').text() +"</p>");
          $("#mainOutput").append("<p class='pad'>" + matchesLine + "</p>");
          $("#mainOutput").append("<br><hr />");
        }   
      });
      $("#searhResults").append("<p>Found " + query + " in " + num_matching_lines + " lines</p>");
      $("#searhResults").append("<p>Found " + query + " " + searchCount + " times</p>");
      $("body").css("cursor", "default");
    }

由以下操作调用:

  $("#term_search").keypress(function (event) {
    if (event.keyCode == 13) searchResults($("#term_search").val()); 
  });
  $('#term-search-btn').click(function () {
    searchResults($("#term_search").val());
  });

问题是光标在搜索完成后更改为等待符号，然后不更改回默认值，我该如何解决这个问题?

Answer 1

您可能遇到两个问题:

1. 如果你的代码没有把控制权交还给JS事件循环，很可能你所做的任何DOM更改都不会立即可见。一种可能的解决方法是更改光标，然后使用setTimeout(func, 0)将控制传递回事件循环，然后可以呈现DOM更新，然后调用func来完成处理。

2. 有些浏览器在鼠标移动之前不会更新光标形状。