js的抖動
在 js 中 改變窗口大小 & 上下滾動滾動條 & 反復向輸入框中輸入內容 ... , 如果綁定了相應的事件 , 這些事件的觸發頻率非常高, 嚴重影響用戶體驗和服務器的性能 , 這種問題 在js中 就叫 js 的抖動 .
解決方法 : 防抖 & 節流
js的防抖
就是在在持續觸發的過程中不會執行對應的函數 , 當觸發停止一段時間后再執行對應的函數
具體就是在觸發事件中設置一個定時器來延遲對應函數的生效 ,只有當兩次觸發事件的間隔時間能夠觸發定時器才會使對應函數生效
<
style>
.
mybox {
width:
600px;
height:
1500px;
background-color: pink;
margin:
0 auto;
}
</
style>
</
head>
<
body>
<
div
class="
mybox"></
div>
</
body>
<
script>
var
timer;
window.
onscroll =
function () {
if (
timer) {
clearTimeout(
timer)
}
timer =
setTimeout(()
=> {
console.
log('
我滾啦')
},
1000)
}
</
script>
js的節流
當持續觸發事件時 ，每隔固定的時間也要調用一次函數
就是給對應函數設置一個觸發的條件 , 每次觸發記錄下當前的時間戳
當兩次獲取的時間戳的差值滿足條件時將執行對應的函數 , 並且將當前的時間記為初次獲取的時間戳
<
style>
.
mybox {
width:
600px;
height:
1500px;
background-color: pink;
margin:
0 auto;
}
</
style>
</
head>
<
body>
<
div
class="
mybox"></
div>
</
body>
<
script>
function
fn() {
//執行函數
console.
log('
我滾啦')
}
function
throttle(
wait,
func) {
var
beginTime =
Date.
now()
return
function () {
var
currentTime =
Date.
now()
var
space =
currentTime -
beginTime
if (
space >=
wait) {
func()
beginTime =
Date.
now()
}
}
}
window.
onscroll =
throttle(
1000,
fn)
</
script>