循环同步 AJAX 修改 DOM

[qinjiannet]

伪代码：

while list 非空：
first = list.shift()
data = ajaxcall(first, async=false)
modifyDomByData(data)

观察到的实际结果是 dom 元素在循环结束后才被一并修改

尝试用 setTimeout 但是无效，请教各位前端大神应当如何修改

[kingme]

我感觉你这样写代码，用户体验奇差阿。。。

[kingme]

ajaxcall(data, (res) = > {
var i = 0;
res.map(data = > {
settimeout(modifyDom(data), i * 1000);
i++
})
})

批量从服务端一次性获取数据，回调函数中设置延迟函数模拟 顺序操作 DOM

[qinjiannet]

@kingme 如果不改变原始逻辑，怎样修改，才能使 DOM 的改动及时生效？而不是等循环结束后才看到 DOM 的变化。

[lastpass]

为什么不试试神奇的 vue 呢。
直接动态绑定。

[Sparetire]

每一次获取数据间隔两个 rAF 执行修改 DOM 操作，但这需要递归，会改变原有代码，或者在每次修改 DOM 之前执行一些获取样式的操作，比如 getComputedStyle，来强制触发一次渲染，但这不太好，还是建议前者

[IssacTomatoTan]

settimeout ( fuc, i*100 )

[NickCarter]

promise async await 了解下

[zhlssg]

```
const showColumnInfo = async() => {
console.time('showColumnInfo')

const names = ['qianduanzhidian', 'FrontendMagazine']
const promises = names.map(x => getZhihuColumn(x))
for (const promise of promises) {
const column = await promise
console.log(`name:${column.name}`)
console.log(`description:${column.description}`)
}
console.timeEnd('showColumnInfo') // 2615.484ms
}

showColumnInfo()
```