在javascript中首先显示加载的元素答案

【问题标题】：Show the loaded element first in javascript在javascript中首先显示加载的元素
【发布时间】：2019-12-12 02:41:57
【问题描述】：

我想知道如何首先使用 javascript 对加载的内容进行排序。

如图所示，我有一组元素，它们传递给一个函数并进行 ajax 调用，直到它完成成功数据，显示一个 loader(.gif)。我想先显示加载的元素，如果加载的元素在顶部，总是移动到堆栈的最后一个，

所以我有一个元素undefined，一旦加载完成，转到1 以知道它已加载，但它不起作用，我想知道在 javascript 中的任何可能方法

var elements=["trans", "fund", "service"];
setTimeout(()=>{elements.map(e=>this.getData(e));}, 1000);

function getData(id){
    var loader = this.shadowRoot.getElementById("overlay-"+id);
    $(loader).css("display", "block");
        $.ajax({
      url: url,
      method: 'get',
      global: false,
      async: true,
      dataType: "json",
      data: {
         element: id
      },
      success: function (data) {
        self.getNewData(data);  
      },
      complete: function(){
        $(loader).css("display", "none");
       },
    }).responseText;
}

//success data will be like below

data=[{
 "id": "trans",
 "load": "undefined",
 "option": "bank",
 "cost": "100"
},{
  "id": "fund",
 "load": "undefined",
 "option": "credit",
"cost": "300"
},{
 "id": "service",
 "load": "undefined",
 "option": "bank",
 "cost": 200"
}]

function getNewData(newdata){
  newData.map(e=>({ ...e, load: 1 }));
  var list =[];
  list = newData.sort(function(a,b){
   return a.cost - b.cost && a.load - b.load;  
 })
}
render(){
 <style>
              .overlay{
                background-color: #e9e9e9;
                opacity: 0.7;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 100;
                height: 100%;
                width: 100%;
                overflow: hidden;
                background-image: url('../images/loader.svg');
                background-position: center;
                background-repeat: no-repeat;
              }
              .loadingimg{
                background: url(../images/loader-img.svg) center center no-epeat;
                height: 100%;
                z-index: 20;
              }
</style>

 list.map(e=>{
  return html`
            <div class="overlay" id="overlay-${e.id}">
              <div class="loadingimg" id="loading-${e.id}"></div>
            </div>
          <p>Welcome to ${e.id}</p>
  `;
 }) 
}

【问题讨论】：

标签： javascript jquery ajax loading lit-element

【解决方案1】：

如果是多次调用，这个方法可能会给你更大的控制权：https://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/ ...或设置一个变量，例如var step = 0 并在成功时使用step++ 更新它，然后完整的if (step === elements.length) doSomething()

您也可以按照以下方式做一些事情：

var elements = ["trans", "fund", "service"];
var step = 0;

function recursiveDataFetch(arr) {
  var data = arr.shift();
  if (data === undefined) return;
  step++;
  $.get(url, function(response) {
    if (step < elements.length) return recursiveDataFetch(arr);
    return doSomethingWhenAllIsReady();
  });
}

如果我误读了问题并且这是一次调用，那么您只是在等待数据出现后再删除加载程序，然后只需使用回调或查看我在这里写的内容：https://jsfiddle.net/darcher/4hqo57wv/（注意：它是 vanilla js，但应该会有所帮助。）

【讨论】：