循环同步 AJAX 修改 DOM

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2079 天前的主题，其中的信息可能已经有所发展或是发生改变。

伪代码：

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

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

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

8 条回复 • 2018-08-10 09:47:26 +08:00

kingme

2018-08-09 23:14:58 +08:00

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

kingme

2018-08-09 23:17:50 +08:00

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

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

qinjiannet

2018-08-09 23:23:37 +08:00 via iPhone

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

lastpass

2018-08-10 00:08:13 +08:00

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

Sparetire

2018-08-10 04:09:23 +08:00 via Android

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

IssacTomatoTan

2018-08-10 07:59:08 +08:00 via Android

settimeout ( fuc, i*100 )

NickCarter

2018-08-10 08:17:47 +08:00 via iPhone

promise async await 了解下

zhlssg

2018-08-10 09:47:26 +08:00

```
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()
```