javascript - clearInterval 不停止间隔

Question

我试图在像这样向下滚动的同时使用 headless-chrome/puppeteer 抓取一些链接:

 let interval
 const linkScraper = async () => {
        return new Promise(async (resolve,reject) => {
               interval = setInterval(async () => {
                const visiblePosts = await page.$$("div[class*='wrapper']")
                const data = await handleVisiblePosts(visiblePosts)
                allPosts = {...allPosts, ...data}
                await scroll()
                const stop = await areWeAtTheBottom()
                if (stop) {              
                    console.log('STOPPING')              
                    clearInterval(interval)
                    resolve()                
                }
            }, 100); 

           })
          }

有问题吗？ clearInterval 实际上并不停止间隔。 stopping 被打印多次。

我怀疑这也可能是因为 setinterval 是异步的，它需要异步才能使用 await。

Answer 1

我可以找到以下可能的原因导致您的间隔无法停止:

1. 您永远不会达到停止条件。
2. 您以某种方式覆盖了 interval 变量，因此不再保存您想要停止的实际间隔。
3. 您收到了被拒绝的 promise 。

似乎没有任何理由说明为什么 interval 变量需要位于 linkScraper 函数之外，并将其放在函数内部将防止它在任何情况下被覆盖方式。

有了这么多 await 调用，添加 try/catch 来捕获任何被拒绝的 promise 并在出现错误时停止间隔似乎是明智的。

如果您看到记录了 STOPPING，那么您显然遇到了停止条件，因此它似乎必须是被覆盖的 interval 变量。

这是一个无法覆盖 interval 变量并为代码简洁性进行了一些其他更改的版本:

 const linkScraper = async () => {
     return new Promise((resolve, reject) => {
         const interval = setInterval(async () => {
             try {
                 const visiblePosts = await page.$$("div[class*='wrapper']");
                 const data = await handleVisiblePosts(visiblePosts);
                 allPosts = { ...allPosts, ...data};
                 await scroll();
                 const stop = await areWeAtTheBottom();
                 if (stop) {
                     console.log('STOPPING');
                     clearInterval(interval);
                     resolve();
                 }
             } catch(e) {
                 clearInterval(interval);
                 reject(e);
             }
         }, 100);

     });
 }

<小时/>

在清理这段代码时，我遇到了几个问题:

1. 使用 await 的所有四个函数实际上都返回一个 Promise 吗？
2. 那么，allPosts 是在哪里声明的？

<小时/>

编辑:刚刚发现了另一个问题。 setInterval() 不知道函数内的 await 调用。请记住，外部函数实际上并不阻塞。一旦您点击 await，它就会立即返回。这意味着您可以在处理第一个回调的异步操作时获得另一个 setInterval() 回调。那会把事情搞砸的。这是解决这个问题的方法:

function delay(t) {
    return new Promise(resolve => {
        setTimeout(resolve, t);
    });
}

const linkScraper = () => {
        console.log("starting linkScraper");

        async function run() {
            const visiblePosts = await page.$$("div[class*='wrapper']");
            const data = await handleVisiblePosts(visiblePosts);
            allPosts = { ...allPosts, ...data};
            await scroll();
            const stop = await areWeAtTheBottom();
            if (stop) {
                console.log('STOPPING');
                return "stop";
            }
            return "continue";
        }

        return run().then(result => {
            if (result === "continue") {
                return delay(100).then(run);
            }
        })

    });
}