リサイズ中か否かを判定する方法
JavaScriptで、リサイズ中には行ないたくない処理があるかもしれません。ユーザーがリサイズ中か否かを判定するには、事前にresizeイベントとsetTimeout()で仕組みを作っておきましょう。
サンプルコード
グローバル変数のisResizingには、ユーザーがスクロール中には1
が、スクロールを停止してから500ms後には0
が代入されます。この変数の値で、スクロール中か否かを判定しましょう。
var isResizing = 0 ;
var timeoutId ;
window.addEventListener( "resize", function () {
isResizing = 1 ;
// リサイズを停止して500ms後に終了とする
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
isResizing = 0 ;
}, 500 ) ;
} ) ;
デモ
リサイズ中だけ、変数の値が1になるのを確認しましょう。
var isResizing = 0 ;
var timeoutId ;
window.addEventListener( "resize", function () {
isResizing = 1 ;
// リサイズを停止して500ms後に終了とする
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
isResizing = 0 ;
}, 500 ) ;
} ) ;
isResizing = 0
関連記事
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- 配列の重複する要素を削除する方法
- PHPのarray_unique()のように配列の重複した要素を削除します。
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。