时间戳

首页 > 解决方案 > 如何减慢javascript中的循环

javascript - 如何减慢javascript中的循环

问题描述

您好，我正在制作一个 for 循环以从 iframe 获取数据。但是循环太快了。我怎样才能减慢这个循环以在 50-100 毫秒或更长时间内执行每次迭代？

        for (let i = 113361978; i < 113371978; i++) {

        fetch('https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/' + i)
        .then(res => res.json())
        .then(
            (json) => {
                console.log(i);
                if (json.author_name === 'Chuck Norris') {
                    document.write(`<iframe src="https://player.vimeo.com/video/${i}" width="640" height="640" frameborder="0" allowfullscreen=""></iframe>`);
                }   
            }
        )
    }

我也尝试使用 setInterval 但我的 i 变量不等于结果并显示带有错误 ID 的 iframe。

                let i = 220316094;
                function loop(){

                    fetch('https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/' + i)
                        .then(res => res.json())
                        .then(
                            (json) => {
                                console.log(i);
                                if (json.author_name === 'Chuck Norris') {
                                    document.write(`<iframe src="https://player.vimeo.com/video/${i}" width="640" height="640" frameborder="0" allowfullscreen=""></iframe>`);
                                }

                            }
                        ).then(i++) 
                }

                function loop2(){
                    setInterval(loop, 50);
                }
                loop2()

标签： javascriptperformanceloops

解决方案

拥抱async并await更容易遵循异步代码。

现在您可以将函数重写为

async function doTheDownloads(){
    for (let i = 113361978; i < 113371978; i++) {
        const url = 
          'https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/' + i
        const res = await fetch(url)
        const json = await res.json()
        if (json.author_name === 'Chuck Norris') {
            document.write(something); //you probably want a different approach here
        } 
    }
}

现在定义一个异步delay函数

const delay = t => new Promise(resolve => setTimeout(resolve, t))

并在循环中使用它

async function doTheDownloads(){
    for (let i = 113361978; i < 113371978; i++) {
        const url = 
          'https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/' + i
        const res = await fetch(url)
        const json = await res.json()
        if (json.author_name === 'Chuck Norris') {
            document.write(something); //you probably want a different approach here
        } 
        await delay(1000) //wait for 1s
    }
}


const delay = t => new Promise(resolve => setTimeout(resolve, t))
async function doTheDownloads(){
    for (let i = 113361978; i < 113371978; i++) {
        const url = 
          'https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/' + i
        const res = await fetch(url)
        const json = await res.json()
        const el = document.body.innerHTML += json.html
        await delay(1000) //wait for 1s
        
        break; // <= remove this
    }
}
doTheDownloads()

推荐阅读