web関連

Jqueryでブラウザの横幅が特定の幅を超えたらリロードするやつ

2018/05/16
Jqueryでブラウザの横幅が特定の幅を超えたらリロードするやつ

あまり使わないけど、勉強がてらブラウザの幅を小さくして行って特定の幅以下になったら自動でリサイズされるコード

jsファイルに以下のように記述

$(window).on("resize", function() {
var w = window.innerWidth;
if(w < 768) {
window.location = window.location;
}
});

過去にウィンドウサイズを取得するのに$(window).width();を使って大変だったので、$(window).width();は使わない方がいい

↓過去に躓いた時の記事

原因 サイトの右側に表示されるスクロールバー分が取得できていなかった… 以下(失敗例)のような書き方だとスクロールバーの幅を除いたウィン...

ただ、上記の書き方だとウィンドウサイズが768pxをまたぐごとにすぐに読み込み直すので、setTimeout()関数で何秒か後に実行させる記述を書きます。

setTimeout()関数を使って実行

ウィンドウサイズが768pxを越して3秒後にリロードをする記述

$(window).on("resize", function() {
var w = window.innerWidth;
if(w < 768) {
setTimeout(function(){
window.location = window.location;
}, 3000);
}
});

しかし上記コードだと、ブラウザの横幅をぐりぐりいじっている最中でもリロードがされてしまうので、リサイズが終わってから3秒後にリロードするようにするように書き換える

clearTimeout()関数を使って完成

var timer = false;
$(window).on("resize", function() {
var w = window.innerWidth;
if(w > 768) {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function(){
window.location = window.location;
}, 2000);
}
});

「clearTimeout()」は「setTimeout()」を解除するやつ

リサイズでぐりぐりウィンドウ幅を触っているときは、「setTimeout()」が「clearTimeout()」で解除されリサイズが終わってようやく読み込みが実行される

参考

▼[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html

基本的にブラウザの横幅をぐりぐり変えるユーザーはあまりいないしいまいち使いどころがわからないけど、動いてよかった…