JSジッタ
ウィンドウサイズを変更すると上下にスクロールスクロール・バー&繰り返し、対応する結合事象は真剣サーバJSにおけるユーザーエクスペリエンスとパフォーマンスに影響を与え、これらの事象の頻度が非常に高いトリガした場合...コンテンツ入力ボックスを入力するには、このジッタと呼ばれるJSのJSで問題。
回避策:シェイク&スロットル
JS手ぶれ補正
イベントをバインドするときに有効になります2つのトリガイベントの発効は、インターバルタイマーをトリガーできるようになるまで、結合事象の発効、および各パージタイマ・トリガ・イベントを遅らせるためにタイマーでトリガーイベントを設定することです(連続トリガトリガーは、特定の時間間隔に対応する二つの機能を実行するときに)のみ機能するように対応していません
< スタイル >
。
mybox
{
幅: 600PX。
高さ: 1500px ;
背景色:ピンク;
マージン: 0 自動;
}
</ スタイル >
</ ヘッド >
< 身体 >
<
div
class="
mybox"></
div>
</
body>
<
script>
var
timer;
window.
onscroll =
function () {
if (
timer) {
clearTimeout(
timer)
}
timer =
setTimeout(()
=> {
console.
log('
我滚啦')
},
1000)
}
</
script>
js的节流
当触发事件时 , 每隔固定时间 执行一次函数
步骤 :
1.进入触发函数中先 获取 一次当前时间 beginTime
2.返回一个匿名函数
a.在获取一次当前时间 currentTime
b.得到两次获取时间的差值 cpace
c.将space 与间隔时间进行比较 , 如果不小于间隔时间就调用执行函数 , 并且此时获取当前时间赋值给 beginTime
<
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>