首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qinjiannet
V2EX  ›  程序员

循环同步 AJAX 修改 DOM

  •  
  •   qinjiannet · 2018-08-09 23:13:13 +08:00 via iPhone · 1264 次点击
    这是一个创建于 535 天前的主题,其中的信息可能已经有所发展或是发生改变。
    伪代码:

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

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

    尝试用 setTimeout 但是无效,请教各位前端大神应当如何修改
    8 回复  |  直到 2018-08-10 09:47:26 +08:00
    kingme
        1
    kingme   2018-08-09 23:14:58 +08:00
    我感觉你这样写代码,用户体验奇差阿。。。
    kingme
        2
    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
        3
    qinjiannet   2018-08-09 23:23:37 +08:00 via iPhone
    @kingme 如果不改变原始逻辑,怎样修改,才能使 DOM 的改动及时生效?而不是等循环结束后才看到 DOM 的变化。
    lastpass
        4
    lastpass   2018-08-10 00:08:13 +08:00
    为什么不试试神奇的 vue 呢。
    直接动态绑定。
    Sparetire
        5
    Sparetire   2018-08-10 04:09:23 +08:00 via Android
    每一次获取数据间隔两个 rAF 执行修改 DOM 操作,但这需要递归,会改变原有代码,或者在每次修改 DOM 之前执行一些获取样式的操作,比如 getComputedStyle,来强制触发一次渲染,但这不太好,还是建议前者
    IssacTomatoTan
        6
    IssacTomatoTan   2018-08-10 07:59:08 +08:00 via Android
    settimeout ( fuc, i*100 )
    NickCarter
        7
    NickCarter   2018-08-10 08:17:47 +08:00 via iPhone
    promise async await 了解下
    zhlssg
        8
    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()
    ```
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2271 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 30ms · UTC 13:04 · PVG 21:04 · LAX 05:04 · JFK 08:04
    ♥ Do have faith in what you're doing.