1.首先我們創建一個視窗的滾動事件每0.5秒輸出一次1
<script>
window.onscroll = function () {
setTimeout(function () {
console.log(1);
}, 100)
}
</script>當我們按一下方向鍵發現視窗滾動事件觸發了八次，如果是滾動視窗時間會觸發更多次，如果我們和服務器互動時會給服務器造成很多不必要的壓力，我們為了避免這類事的發生引進了節流
我們在全域定義一個flag當定時器運行結束時我們將flag改為false，這樣我們的函式只會觸發一次，我們在定時器中將flag設定true這樣我們定時器就會每0.1秒觸發一次
<script>
let flag = true
window.onscroll = function () {
if (flag) {
setTimeout(function () {
console.log(flag);
flag = true
}, 100)
flag = true
}
flag = false
}
</script>這樣即使我們滾動到底也不會觸發過多事件
當我們在做一些頁面互動是會不斷地觸發相同的事件，會給服務器帶來很多壓力，我們只想要這個事件最后一次出發的結果，所以我們引入了防抖
我們創建一個input每次輸入都會回傳一個結果
節流下的效果是這樣的
let t = null
inp.oninput = function () {
if (t != null) {
clearTimeout(t)
}
t = setTimeout(function () {
console.log(inp.value);
console.log(this);
}, 500)
}
但是這樣也有一些弊端
首先我們多設定了一個去全域變數
代碼又不是簡單易懂邏輯性不強
我們進行了如下改進
let inp = document.querySelector("input")
inp.oninput = debounce(function () {
console.log(inp.value);
}, 500)
function debounce(fn, delay) {
let t = null
return function () {
if (t != null) {
clearTimeout(t)
}
t = setTimeout(function () {
fn()
}, delay)
}
}我們利用閉包創建了一個debounce防抖函式具體我就不贅述了自己看吧，我同學等我放學啦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289882.html
標籤：其他