polling - 如何在 svelte 中进行投票？

Question

我有一个特定的应用程序应该执行以下操作:

1. 您有一份要检查的工作 list
2. 当您点击一份工作时，您会看到详细信息
3. 详细 View 将轮询 API 以查看实时进度更新

我在以下 REPL 中做了一个基本的实现:https://svelte.dev/repl/fcdce26dc0d843dbb4b394dcd2c838af?version=3.20.1

这种方法有几个问题:

1. Job.svelte View 基本上应该在您提供新 ID 时重置，并清除所有以前的轮询器，但现在底部的响应式(Reactive)语句非常尴尬
2. 因为轮询器执行异步获取，所以超时处理程序 poller 可能会被清除，即使处理程序已经在执行。这会导致出现多个轮询器循环(您可以通过以 0 到 2 秒之间的随机间隔单击作业列表来重现此问题)
3. 当前的方法对开发人员不友好并且很容易被破坏。上面的“错误”可以通过跟踪引用/锁定之类的东西来修复，但这样就更难解决了。

对于这个用例，什么是更好的实现方式(在 Svelte 中)？

非常感谢!

Answer 1

The Job.svelte view should basically reset when you provide a new id, and clear out any previous poller, but now it's super awkward with a reactive statement at the bottom

就像之前的回复已经指出的那样，这就是 Svelte 方式。起初它很尴尬，直到您意识到它非常简单、方便和优雅。

我会在您的代码中改进两件事:

• 消除每个 ID 的困惑缓存 + 单一进度值分配；这就是导致您的延迟获取以可视方式显示的原因(延迟获取回复本身不是错误，但是向您的用户显示它是)；我只是将你的缓存对象重命名为 progress 并选择显示 progress[id]，这样延迟获取的回复将在后台更新，但不会在视觉上干扰你当前的显示的工作
• 使用setInterval代替多个setTimeout进行定期轮询

<script>
    export let id

    let progress = {}
    let poller

    const setupPoller = (id) => {
        if (poller) {
            clearInterval(poller)
        }
        poller = setInterval(doPoll(id), 2000)
    }

    const doPoll = (id) => async () => {
        console.log(`polling ${id}`)
        progress[id] = await new Promise(resolve => setTimeout(() => {
            resolve((progress[id] || 0) + 1)
        }, 500))
    }

    $: setupPoller(id)
</script>

<div>
    <p>
        ID: {id}
    </p>
    <p>
        Progress: {progress[id] || 0}
    <p>
</div>

参见 this REPL