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