In the for loop, submit the synchronization ajax, and render the returned value on the page in real time. How to do it ~ ~

The

page has a pop-up window, which will do some operations in batches.

use the for loop to loop out the list, submit it to the interface in turn, and render the returned values to the page.

condition:

  1. for loop
  2. ajax must be synchronized
  3. render the page in real time, similar to progress 

    for (var i = 0; i < sn.length; iPP) {
        $.ajax({
            type: "post",
            url: "aaa.action",
            data: {"details.sn": sn[i], ...details},
            async: false,
            success: function (res) {
                if (res.normal === 1) {
                    reMsg += `<li>${res.details.sn}: <span style="color: green">${res.msg}</span></li>`
                    $(".showSn").html(reMsg)
                } else if (res.normal === 0) {
                    reMsg += `<li>${res.details.sn}: <span style="color: red">${res.msg}</span></li>`
                    $(".showSn").html(reMsg)
                }
            }
        })
    }

now the dom is updated in real time, but the pop-up window does not render in real time. It will not be rendered until all the interfaces have been executed:

the following figure

clipboard.png

clipboard.png

how do you write it if you want to use the generater function?
or, how do you write without the generater function?

Javascript
May.12,2022

you can use Promise 

let innerFun = ()=>{
  return new Promise((resolve, reject)=>{
    // setTimeoutajaxsuccessresolve
    setTimeout(()=>{
      resolve()
    }, 1000)
  })
}

let forFun = async ()=>{
  for (let i = 0; i < 15; iPP) {
    await innerFun()
    console.log(i)
  }
}

forFun()

I encountered a similar problem when I was working on the real-time progress
finally found that the recursive call is fine. In the for loop, the ajax asynchronous request will lock the front end (that is, the final result will be displayed at one time).
it can be achieved with setInterval if you must use ajax synchronization, but the effect is not good (some of the animation effects in the front end may not move, and the request speed is relatively slow, and the interface card during execution).
it is best to recursively loop the ajax asynchronous request, and the front end can be rendered when a single request for seccess is made (the front end will not be locked by ajax).

for example: 

            ajax_post(data);

            function ajax_post(data) {
                if (xxx) {//
                    return;
                }
                $.ajax({
                    url: '/xxx',
                    type: "post",
                    data: {
                        'data': data
                    },
                    // async:false,
                    success: function (data) {
                        change_table(data);//
                        ajax_post(data);//
                    }
                });
            }

the description is clear, but I don't understand this sentence

dom is updated in real time, but pop-up windows are not rendered in real time.

Previous: Since vue-router provides addRouter, why not provide api of deleteRouter (dynamic delete route)

Next: How to tell if a point is in the camera's field of view?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu