Javascript の代わりに Css で Throttle を使用する方法

ご存知のように、関数スロットルは JS で非常に一般的な最適化方法であり、関数の実行頻度が高すぎるのを効果的に回避できます。実際、JS メソッドに加えて、CSS もフレームワーク ライブラリなしで非常に簡単にそのような関数を実装できます。 、見てみましょう。

例: 保存ボタンは、送信の繰り返しやサーバーの考慮事項を避けるために、300 ミリ秒ごとに 1 つの送信のみを許可するなど、クリック動作に特定の制限を必要とすることがよくあります。現時点では、ほとんどの学生はインターネット上のスロットル関数を直接コピーすると思います。または、lodash ツール ライブラリを直接参照します。

btn.addEventListener('click', _.throttle(save, 300))

ここでは、クリック イベントを制限する、つまりクリック イベントを無効にする必要があります。イベントを無効にする方法を考えてください。はい、ポインターイベントです。
次に制限時間です。クリックするたびに、300 ミリ秒の間自動的に無効にする必要があり、時間が経過すると復元されます。では、時間と状態の復元に関連する機能は何ですか? そうです、アニメーションです。
さらに、トリガー時間が必要です。これはクリック動作です。したがって、疑似クラス: activeに関連付ける必要があります。
したがって、包括的な分析は、ポインターイベント、アニメーション、および:activeを示していますこのような機能を実現するためには、これらのアイデアをどのように直列に接続する必要がありますか?

考えたことはありますか？

実際、このようなシーンは CSS アニメーションの制御として理解できます。たとえば、無効からクリック可能に変わるアニメーション コントロール ボタンがあり、クリックするたびにアニメーションが再実行されます。実行プロセス中は、常に無効になります。「絞り」の効果は得られましたか？

クリック イベントにバインドされたボタンがあるとします。

<button onclick="console.log('save')">save</button>

@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

次に、このアニメーションをボタンにバインドします

button{
  animation: throttle 0.3s step-end forwards;
}

以下に示すように、pointer-events の値は 0 ~ 0.3 秒以内でありません。0.3秒に達すると、すぐにすべてになります。フォワードなので、常にすべての状態を維持します。

最後に、クリック時にアニメーションを再実行し、押したときにアニメーションをなしに設定するだけです。

button:active{
  animation: none;
}
button{
  animation: throttle 2s step-end forwards;
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

具体的な考え方は次のとおりです。次のように、遷移の変更をトリガーするためにアクティブにしてから、遷移コールバックをリッスンしてボタンの無効状態を動的に設定します。

button{
  opacity: .99;
  transition: opacity 2s;
}
button:not(:disabled):active{
  opacity: 1;
  transition: 0s;
}

// start
document.addEventListener('transitionstart', function(ev){
  ev.target.disabled = true
})
// end
document.addEventListener('transitionend', function(ev){
  ev.target.disabled = false
})

ただし、この実装方法はまだ比較的限定されており、クリック動作に限定されています。多くの場合、スロットリングはスクロール イベントまたはキーボード イベントに使用できます。このようなシナリオは、従来の方法で実装できます。