2022年04月28日
7.[JS] Timer処理
JavaScriptのタイマー処理には、下記の様な物があります。
下記に詳細を解説します。
1.指定した時間間隔で処理を実行する。
下記の2つの関数でタイマー処理を行います。
①タイマーのスタート
構文var ハンドル名 = setInterval( 関数名 , 関数を実行する間隔(ミリ秒) , 関数の引数 )
②タイマーのリセット 構文clearInterval( ハンドル名 ) ※タイマーをリセットする時に利用します。 |
メモ
通常TOP画面のスライダは slick等のjQuery を利用しますが、ここではこれを使わずにスライダさせる事例で紹介します。
利用例
画像をスライドさせる場合は下記の手順で行います。
①画像をスライドさせる処理を関数化する。
②画面が表示されたらカウンタを0にして画像を総て非表示にしてから0番目の画像を表示する。
③開始ボタンが挿入されたらタイマーをスタートさせ3秒間隔で①の関数を実行させる。
④中止ボタンが挿入されたらタイマーを止める。
上記の考えで作られたのが下図です。
|
このプログラムは下記から構成されています。
<div style='display:flex;'>
<button type='button' class='start' style='padding:5px 10px;'>開始</button>
<button type='button' class='stop' style='padding:5px 10px;margin-left:5px;'>中止</button>
</div>
<div class='slide_target' style='position:relative;margin-top:5px;'>
<img class='img_item' style='width:300px;position:absolute;top:0;left:0;' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/crown.jpg' alt='0'>
<img class='img_item' style='width:300px;position:absolute;top:0;left:0;' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/alphard.jpg' alt='1' >
<img class='img_item' style='width:300px;position:absolute;top:0;left:0;' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/86.jpg' alt='2'>
</div>
<script>
$(function(){
var slide_no = 0;
$('.img_item').css('display' , 'none'); // 総ての画像を非表示にする
$('.img_item').eq(slide_no).css('display' , 'block');// 先頭画像を表示する
$('.start').click(function(){ // 開始ボタンが挿入されたら3秒間隔でmy_slide関数を実行する
slide_id = setInterval(my_slide,3000);
});
$('.stop').click(function(){ // 中止ボタンが挿入されたらスライドを中止する
clearInterval(slide_id);
});
function my_slide() { // 画像をスライドさせるmy_slide関数
$('.img_item').eq(slide_no).hide('slide' , {direction:'left'});
slide_no = slide_no + 1;
if (slide_no == 3) slide_no = 0;
$('.img_item').eq(slide_no).show('slide' , {direction:'right'});
};
});
</script>
■1～9行目
画像が同じ場所に上書きさせる様にHTMLを作成しています。
■21～26行目
画像をスライドさせる関数を定義しています。
■12～14行目
画面が表示された段階でカウンタを0にして0番目の画像だけを表示しています。
■18～20行目
開始ボタンが挿入されたら3秒毎にスライド関数を読んでいます。
■19～20行目
中止ボタンが挿入されたらタイマーをストップさせる。
2.指定した時間経過後に処理を1回だけ実行する。
下記の2つの関数でタイマー処理を行います。
①タイマーのスタート
構文var ハンドル名 = setTimeout( 関数名 , 関数を実行するまでの時間(ミリ秒) , 関数の引数 )
②タイマーのリセット 構文clearTimeout( ハンドル名 ) ※タイマーをスタートさせる前にリセットする時に利用します。 |
メモ
Windowの各種サイズの取得 はマウスでウィンドウサイズを変更した時点でリアルタイムに表示サイズが変わります。
ここではタイマーを使ってウィンドウサイズを検知してから1秒後に表示する方法です。
利用例
上記をマウスでウィンドウサイズの変更の1秒後に表示する様にする為には下記の様にします。
①ウィンドウサイズの取得部分を関数化する。
②画面が表示されたら0行後に①の関数を実行する。
③画面がリサイズされたらタイマーをリセットし、１秒後に①の関数を実行する。
下記がサンプルです。操作して違いを見て下さい。
■screen.width(モニタ幅):
■outerWidth(ブラウザ幅):
■innerWidth(コンテンツ幅):
■screen.height(モニタ高さ):
■outerHeight(ブラウザ高さ):
■innerHeight(コンテンツ高さ):
|
このプログラムは下記から構成されています。
<div>■screen.width(モニタ幅): <span class='screen_width' style='color:red'> </span></div>
<div>■outerWidth(ブラウザ幅): <span class='window_outerWidth' style='color:red'> </span></div>
<div>■innerWidth(コンテンツ幅): <span class='window_innerWidth' style='color:red'> </span></div>
<br>
<div>■screen.height(モニタ高さ):<span class='screen_height' style='color:red'> </span></div>
<div>■outerHeight(ブラウザ高さ): <span class='window_outerHeight' style='color:red'> </span></div>
<div>■innerHeight(コンテンツ高さ): <span class='window_innerHeight' style='color:red'> </span></div>
<script>
$(function(){
var timer = setTimeout(get_size,0 ); // 画面が表示されたら0秒後に get_size 関数をCALLする
function get_size(){
$('.screen_width').text(screen.width);// モニタ幅の表示
$('.window_outerWidth').text(outerWidth); // ブラウザ幅の表示
$('.window_innerWidth').text(innerWidth);// コンテンツ幅の表示
$('.screen_height').text(screen.height);// モニタ高さの表示
$('.window_outerHeight').text(outerHeight);// ブラウザ高さの表示
$('.window_innerHeight').text(innerHeight);// ンテンツ高さの表示同上
}
$(window).resize(function(){
clearTimeout(timer);// タイマーをリセット(1秒以内の変更は無視)
timer = setTimeout(get_size,1000); // 画面がリサイズされた1秒後に get_size 関数をCALLする
});
});
</script>
■11～18行目
画面サイズを取得する部分を関数化しています。
■10行目
画面の表示が完了した段階で、上記の関数を実行しています。
■19～22行目
画面がリサイズされた時にタイマーをリセットし、1秒後に上記の関数を実行しています。
よって1秒以内の画面リサイズは無視されます。