Question

这是我的代码，但效果还不完美：

function func1() {
       $('.lastStateText').html("<img src='images/Loading.gif' />").fadeIn('slow')
       $('.lastStateText').each(function() {
          lastState('xxx').then(result => 
             $( this ).fadeOut(500, function(){
                $( this ).text(result)
                alert(result)
             })
          )
       })
    }

    function lastState(parameter) { 
       return new Promise( done =>
          $.getJSON("myFile.php", {
             parameter: parameter
          }, function(result) {
                done(result); 
             }
          )
       )
    }

这里发生了什么？

我叫func1
此函数将在每个元素中显示一个Loading.gif，其中包含类＆＃34; lastStateText＆＃34;用fadIn效果
一个循环将遍历所有lastStateText元素，fadeOut它并每次使用参数＆＃39; xxx＆＃39;调用下一个函数lastState。 4 lastState函数将获取myFile.php的结果并将其返回给func1。
现在func1应该将结果设置为lastStateText元素＆lt; - 但这不起作用。现在结果将显示在元素中。如果结果可用，我检查了警告（结果），是 - ＆gt;结果就在那里。但在我的lastStateText元素中不可见。

我的错在哪里？

Answer 1

我假设您必须支持旧的（ish）浏览器，因为您不使用箭头函数或本机承诺而不使用转换器。

传统的并行承诺方式可能是使用jQuery.when方法，它将为您提出所有请求。

它看起来像这样：

function func1() {
  $.when.apply(//jQuery version of Promise.all
    $,
    $('.lastStateText')
    .html("<img src='images/Loading.gif' />")
    .fadeIn('slow')
    .map(
      function(index,element){
        return lastState('xxx').then(function(result) {
          $element = $(element);
          $element.fadeOut(500, function(){
            $element.text(result);
            $element.fadeIn(500);
            console.log("result",result);//changed to console.log
          })
        })
      }
    )
  ).then(
    function(){console.log("finished");}
  ).catch(
    function(){console.warn("something went wrong:",err);}
  );
}
function lastState(parameter) { 
    return $.getJSON(//getJSON already returns a promise like
      "myFile.php", 
      {
          parameter: parameter
      }
    );
}

getJSON的jQuery响应不会显示

1 个答案: