Svelte tick

2023-02-21 15:28 更新

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>

<textarea value={text} on:keydown={handleKeydown}></textarea>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号