javascript - setTimeout 内的代码未按预期顺序触发

Question

这里是新手...我认为这个特定问题以前没有在这个网站上得到解决，我搜索了又搜索，但找不到任何有效的东西。我想显示加载图像。我在 setTimeout 之前隐藏它，然后在 setTimeout 结束时显示它。我读过的所有内容都说这应该有效，但事实并非如此。在我的脚本运行完毕之前，我的图像出现然后立即消失。有任何想法吗？谢谢!

function createHTML(data, listName) {

  var arr = data.d.results;

  $(".save").on("click",function(event){

    // HERE IS WHERE I SHOW MY LOADING IMAGE INITIALLY
    $('.logoImg').show();


    // SET TIMEOUT FUNCTION
    setTimeout(function() {

      $("input.title").each(function(){
        var title = $(this).val() ? $(this).val() : null;    
        var currentUserRequest = GetCurrentUser();

        (function (userData) {
          updateListItem(_spPageContextInfo.webAbsoluteUrl,'MyList',id,itemProperties,printInfo,logError);

          function printInfo() {
            console.log('Item has been UPDATED!');
          }

          function logError(error){
            console.log(JSON.stringify(error));
          }                
        });
      });

      // THIS IS FIRING BEFORE THE ABOVE EACH STATEMENT
      $('.logoImg').hide();
    }, 0);  
  });
}

Answer 1

将为每个与选择器匹配的元素调用传递给 each 的回调函数。

看起来您只想在为所有元素调用回调后才调用 hide()。

要完成此操作，您需要在最后一次回调后调用它。

像这样的东西应该有效:

var titles = $("input.title");
var length = title.length;
titles.each(function(index, element) {
  // Do what you need
  if(index == (length-1)) {
    // We are now on the last one
    $('.logoImg').hide();
  }
});