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

Question

我想知道如何先使用 javascript 对加载的东西进行排序。

如图所示，我有一个元素数组，这些元素正在传递给一个函数并进行 ajax 调用，直到它完成成功数据，我正在显示一个加载程序 (.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>
  `;
 }) 
}

Answer 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，但应该有所帮助。）

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

Show the loaded element first in javascript

javascript

jquery

ajax

loading

lit-element