javascript - Svelte tick() 不强制更新变量

Question

我遇到了在 svelte 中似乎很常见的问题，但还没有找到好的解决方案。我有一个在组件中按下按钮时调用的函数，基本情况如下所示。

<script>
import tick from 'svelte'

let x = 0;
let y = 0;
let z = 0;
async function buttonHandler() {
     --- multiple computationally intensive loops 
        that update the vars x,y,z at different points ---
    e.g.
    for (a in arr) {

        x ++;
        await tick();
    }
}
</script>

<main>
    <button on:click={buttonHandler}>Click Me</button>
    <p>{x}</p>
    <p>{y}</p>
    <p>{z}</p>
</main>

我基本上希望 x、y、z 值在函数增加它们时在屏幕上更新，以便实时更新进度。最初他们直到函数完成才更新，我读到这是因为 svelte 批量更新对 react 变量的更改。然后我读到 'tick()' 函数是为这种情况设计的，用于“刷新”更新并让 DOM 重新呈现更新的值。但是这仍然不起作用，我让它工作的唯一方法是用通用的 sleep() 函数替换 tick() :

function sleep(millisec = 0) {
        return new Promise((resolve, reject) => {
        setTimeout(_ => resolve(), millisec);
        });
    };

这似乎不是一个好的解决方案，我觉得我一定错过了一些东西。有没有其他人遇到过滴答无法按预期工作的情况？

Answer 1

您可以使用 afterUpdate 函数来检查您是否按预期刷新

import { tick, afterUpdate } from 'svelte';

afterUpdate(() => {
//This should log multiple times, one for every expected value change after tick()
 console.log(x, y ,z);
})

我在 REPL 中尝试了你的代码，添加了每 100 倍循环更新的基本循环，它看起来仍然是即时的，但日志显示它确实更新正确。所以 flush 不会像 React 那样触发新的渲染(阻塞线程)，相反，它有自己的批处理调度。为了解决这个问题并保持 react 性，而不是看起来笨重，他们建议使用 CSS 动画来获得所需的平滑效果。 CSS 动画不会阻塞主线程。

"When you update component state in Svelte, it doesn't update the DOMimmediately. Instead, it waits until the next microtask to see ifthere are any other changes that need to be applied, including inother components. Doing so avoids unnecessary work and allows thebrowser to batch things more effectively."

来自:( https://svelte.dev/tutorial/tick )[https://svelte.dev/tutorial/tick]
所以这就是为什么它在你的情况下看起来很即时。
你可以在这里看到他们如何用补间动画解决这个问题:
https://svelte.dev/tutorial/tweened
因此，它们通过不会像 setTimeout 、 setInterval 或 dom 渲染那样减慢或阻塞主线程的动画来减慢速度。
更新
更好的例子: https://svelte.dev/repl/c2856360456c40e98ace08438e5bf82f?version=3.38.2