Kỹ thuật tối ưu xử lý Javascript khi resize Browser

Vấn đề gặp phải. Khi bạn làm việc với jQuery window resize. Ví dụ

<script>
    $(window).resize(function(){
        console.log(1);
        // Your code
    })
</script>

Khi bạn viết như trên thì vấn đề gặp phải ở đây là mỗi lần bạn kéo trình duyệt 1px. Code của bạn sẽ chạy 1 lần. Nếu bạn kéo trình duyệt từ 2000px về 1000px thì code của bạn sẽ chạy 1000 lần. Tất nhiên là nó vẫn chạy Ok nhưng về tổng quát thì nó sẽ chạy nhiều lần không cần thiết.

Hướng xử lý tối ưu là bạn co kéo trình duyệt đến khi việc co kéo dừng lại thì mới chạy code. Để làm như vậy. Bạn có thể tham khảo như dưới đây.

<script>
	var timer = false;
	$(window).resize(function() {
		if (timer) clearTimeout(timer);
		timer = setTimeout(function(){
            console.log(1);
            // Your code
		}, 300);
	});
</script>

Như vậy. Khi bạn co kéo trình duyệt thì code của bạn sẽ chỉ chạy 1 lần.

Để thuận tiện hơn viết resize ở nhiều nơi bạn có thể tham khảo thư viện Smart Resize trong Smart Utility ở đây. Sau khi nhúng thư viện vào, đơn giản bạn chỉ cần viết.

<script>
		$(window).sResize(function(){
			console.log(1);
            // Yourcode
		})
</script>

Hi vọng bài viết sẽ hữu ích với bạn. Mình rất vui nếu đc bạn chia sẻ các kỹ thuật khác