· Sveltetick_Svelte

Svelte tick

tick函数不同于其他生命周期函数，因为你可以随时调用它，而不用等待组件首次初始化。它返回一个带有resolve方法的 Promise，每当组件pending状态变化便会立即体现到DOM中 (除非没有pending状态变化)。在Svelte中每当组件状态失效时，DOM不会立即更新。反而Svelte会等待下一个 microtask 以查看是否还有其他变化的状态或组件需要应用更新。这样做避免了浏览器做无用功，使之更高效。这点在本示例中有所体现。选择文本，然后按“Tab”键。因为 <textarea> 标签的值已发生变化，浏览器会将选中区域取消选中并将光标置于文本末尾，这显然不是我们想要的，我们可以借助tick函数来解决此问题：import { tick } from 'svelte';然后在 this.selectionStart 和 this.selectionEnd 设置结束前立即运行handleKeydown：await tick();

this.selectionStart = selectionStart;

this.selectionEnd = selectionEnd;示例代码<script>

let text = Select some text and hit the tab key to toggle uppercase;

async function handleKeydown(event) {
    if (event.which !== 9) return;
    event.preventDefault();
    const { selectionStart, selectionEnd, value } = this;
    const selection = value.slice(selectionStart, selectionEnd);
    const replacement = /[a-z]/.test(selection)
        ? selection.toUpperCase()
        : selection.toLowerCase();
    text = (
        value.slice(0, selectionStart) +
        replacement +
        value.slice(selectionEnd)
    );
    // this has no effect, because the DOM hasn't updated yet
    this.selectionStart = selectionStart;
    this.selectionEnd = selectionEnd;}

</script>

<style>

textarea {

width: 100%;

height: 200px;

}

</style>