リサイズ終了時に処理を実行する方法
JavaScriptで、リサイズを終了したタイミングで処理を実行したい時は、resizeイベントとsetTimeout()を利用しましょう。
サンプルコード
リサイズを停止して500ms経った時に終了判定として処理を実行する例です。用途により、500
の部分を調整しましょう。
var timeoutId ;
window.addEventListener( "resize", function () {
// リサイズを停止して500ms後に終了とする
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
// 処理内容
}, 500 ) ;
} ) ;
デモ
リサイズを停止した時に、カウントが増加するのを確認して下さい。
var timeoutId ;
var count = 0 ;
window.addEventListener( "resize", function () {
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
++count ;
}, 500 ) ;
} ) ;
count = 0
関連記事
- リサイズイベントの頻度を減らす方法
- リサイズイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- スクロール中だけスタイルを適用する方法
- スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。