9.1 Hadisə delegasiyası
JavaScript-də hadisələrlə işləmək performansı optimallaşdırmaq və tətbiqin arxitekturasını yaxşılaşdırmaq üçün mürəkkəb idarəetmə tələb edə bilər.
JavaScript-də hadisələrlə işləməyin optimallaşdırılması məhsuldar veb tətbiqlər yaratmaq üçün çox vacibdir, xüsusilə çox sayda elementlə işləmək lazım olduqda. Bu kontekstdə, hadisə delegasiyası və artıq işləyicilərin qarşısının alınması əsas rol oynayır.
Hadisə delegasiyası — hadisə işləyicisinin hər bir fərdi alt elementdə deyil, valideyn elementdə təyin edildiyi bir nümunədir. Bu, çoxlu alt elementlər üçün hadisələrə səmərəli şəkildə nəzarət etməyə imkan verir, çünki işləyici hər bir element üçün deyil, yalnız valideyn üçün bir dəfə çağırılır.
Hadisə delegasiyası olmadan nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Hadisə delegasiyası nümunəsi</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.querySelector('ul');
const items = document.querySelectorAll('#list li');
items.forEach(item => {
item.addEventListener('click', function(event) {
const li = document.createElement('li');
li.innerText = "Yeni element, hadisə burada işləməyəcək";
list.appendChild(li);
alert(`Siz basdınız: ${event.target.textContent}`);
});
});
</script>
</body>
</html>
Problem: əgər elementlərin siyahısı dinamik olaraq artırsa, hər yeni element üçün işləyici əlavə etmək lazım olacaq.
Həll — hadisə delegasiyası nümunəsi:
<!DOCTYPE html>
<html>
<head>
<title>Hadisə delegasiyası nümunəsi</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const li = document.createElement('li');
li.innerText = "Yeni element, hadisə burada işləyəcək";
list.appendChild(li);
alert(`Siz basdınız: ${event.target.textContent}`);
}
});
</script>
</body>
</html>
Üstünlüklər:
- İşləyici yalnız valideyn elementdə əlavə edilir
- Dinamik olaraq əlavə olunan elementlər avtomatik olaraq hadisə işləyicisini dəstəkləyəcək
9.2 Lazımsız handler-lərin qarşısının alınması
Performansın zəifləməməsi üçün, xüsusən də çoxsaylı elementlərə və ya tez-tez çağırılanlara əlavə edilmiş handler-lərin sayını minimuma endirmək vacibdir. Optimallaşdırma üçün bir neçə yanaşma:
1. Handler-lərin sayını azaltmaq: handler-lərin sayını azaltmaq üçün hadisə delegasiyasından istifadə edin.
2. addEventListener-də once istifadə edin: əgər handler yalnız bir dəfə işləməlidirsə, handler əlavə edərkən { once: true } seçimindən istifadə edin.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Tək-tək event nümunəsi</title>
</head>
<body>
<button id="myButton">Mənə bas!</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
alert('Siz düyməyə basdınız');
}, { once: true });
</script>
</body>
</html>
3. Debouncing və throttling: bu texnikalar, tez-tez çağırılan handler-lər, məsələn, scroll və ya resize, üçün optimallaşdırmada faydalıdır.
9.3 Debounsing
Debounsing ardıcıl olaraq bir neçə dəfə çağırılan funksiyaları birləşdirir və yalnız hadisə axını kəsildikdən sonra həmin funksiyanı işə salır.
Nümunə:
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Pəncərə ölçüsü dəyişdi');
}, 300));
Sonucu görmək üçün widget-ın enini dəyişməyə çalışın
Debounsing nümunəsi
Bu nümunədə axtarış funksiyası yalnız istifadəçi 300 millisaniyə ərzində yazmağı dayandırdıqdan sonra çağırılır.
<!DOCTYPE html>
<html>
<head>
<title>Debounsing nümunəsi</title>
</head>
<body>
<div style="min-height: 55px">
<input type="text" id="searchInput" placeholder="Sorğunu daxil etməyə başlayın...">
<div id="results"></div>
</div>
<script>
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function performSearch(event) {
const query = event.target.value;
results.textContent = 'Axtarılır: ' + query;
// Serverə sorğunun imitasiyası
setTimeout(() => {
results.textContent = 'Siz axtardınız: ' + query;
}, 500);
}
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Debounsing nümunəsi</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Sorğunu daxil etməyə başlayın...">
<div id="results"></div>
<script>
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function performSearch(event) {
const query = event.target.value;
results.textContent = 'Axtarılır: ' + query;
// Serverə sorğunun imitasiyası
setTimeout(() => {
results.textContent = 'Siz axtardınız: ' + query;
}, 500);
}
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);
</script>
</body>
</html>
9.4 Trotlling
Trolinq Trotlling funksiyanın müəyyən edilmiş vaxt intervalında bir dəfədən artıq çağırılmayacağına zəmanət verir.
Nümunə:
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Pəncərə scroll edildi');
}, 300));
Başqa bir trotlling nümunəsi
Bu nümunədə scroll handler hər 200 millisaniyədən tez çağrılmır, bu da tez-tez baş verən scroll hadisələri zamanı brauzerin həddindən artıq yük olunmasının qarşısını alır.
<!DOCTYPE html>
<html>
<head>
<title>Trotlling nümunəsi</title>
</head>
<body>
<div id="scrollContainer" style="height: 200px; overflow-y: scroll;">
<div style="height: 1000px;"></div>
</div>
<div id="status">Effekti görmək üçün scroll etməyə başlayın</div>
<script>
const scrollContainer = document.getElementById('scrollContainer');
const status = document.getElementById('status');
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
const context = this;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
function handleScroll(event) {
status.textContent = 'Scroll olunur... ' + new Date().toLocaleTimeString();
}
const throttledScroll = throttle(handleScroll, 200);
scrollContainer.addEventListener('scroll', throttledScroll);
</script>
</body>
</html>
9.5 Hadisələrin passiv dinləyicilər vasitəsilə optimizasiyası
Hadisələrin passiv dinləyiciləri (passive event listeners) performansı yaxşılaşdırmaq üçün istifadə olunur, xüsusən də skroll hadisələrinin (scroll) işlənməsi zamanı. Əgər hadisə işləyicisi passiv kimi təyin olunarsa, bu o deməkdir ki, o preventDefault() çağırmayacaq, bu da brauzerə performansı optimallaşdırmağa imkan verir.
Nümunə:
window.addEventListener('scroll', function(event) {
console.log('Skroll edilir');
}, { passive: true });
GO TO FULL VERSION