Skip to main content

Hàm tick khác biệt so với các hàm vòng đời khác vì bạn có thể gọi nó bất cứ lúc nào, không chỉ khi component được khởi tạo ban đầu. Nó trả về một promise giải quyết ngay lập tức khi mọi thay đổi trạng thái đang chờ được áp dụng vào DOM (hoặc ngay lập tức nếu không có thay đổi trạng thái đang chờ).

Khi bạn cập nhật trạng thái component trong Svelte, nó không cập nhật DOM ngay lập tức. Thay vào đó, nó đợi đến microtask tiếp theo để kiểm tra xem có bất kỳ thay đổi nào khác cần được áp dụng, bao gồm trong các component khác. Hành vi này giúp tránh tác vụ không cần thiết và cho phép trình duyệt nhóm các tác vụ hiệu quả hơn.

Bạn có thể thấy hành vi đó trong ví dụ này. Hãy chọn một đoạn văn bản và nhấn phím tab. Bởi vì giá trị của <textarea> thay đổi, vùng chọn hiện tại sẽ bị xóa và con trỏ nhảy sẽ nhảy về cuối. Chúng ta có thể sửa điều này bằng cách nhập hàm tick...

App.svelte
import { tick } from 'svelte';

let text = `Chọn một số văn bản và nhấn phím tab để chuyển đổi sang chữ hoa`;

...và chạy nó ngay trước khi chúng ta đặt this.selectionStart và this.selectionEnd ở cuối hàm handleKeydown:

App.svelte
await tick();
this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd;

Tiếp theo: Stores

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
	let text = `Chọn một số văn bản và nhấn phím tab để chuyển đổi sang chữ hoa`;
 
	async function handleKeydown(event) {
		if (event.key !== 'Tab') 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>
 
<textarea
	value={text}
	on:keydown={handleKeydown}
></textarea>
 
<style>
	textarea {
		width: 100%;
		height: 100%;
		resize: none;
	}
</style>
initialising