今回のお題は、setInterval関数を使って簡単な擬似マルチスレッド処理を作ってみます。事例に簡単なチンチロリンゲームを用意。擬似マルチスレッドの感じがわかれば幸いです。
プログラムの解説と実行
通常、ループ処理中は他の命令を受け付けることができません。JavaScriptはシングルスレッドで一つの処理しか実行できないからです。つまり利用者は処理が終わるのを待たないと次の操作ができなくなることになります。なんか不便ですよね。setInterval関数はタイマー処理で指定した時間毎に処理を実行させる関数です。実行中の処理の合間に別の処理を割りこませることができます。
//一定時間ごとに処理を繰り返させる処理
var timer = setInterval(function(){
//実行したい処理
何かの処理
//繰り返し処理を終了させる処理
if( 終了させる条件 ){
clearInterval(timer);//タイマー処理を終わらせる
}
}, 1000);//1秒毎に処理を実行する。「1000」が1秒にあたるsetInterval関数は処理を停止させるためのclearInterval関数とセットで使います。終了条件が満たされないと繰り返し処理は終了しないので注意が必要です（無限ループ）。
中断ボタンでループ処理を停止できるようにする
乱数でサイコロを100回振ります。for文だと処理が最後まで進まないと、操作が一切できません。setInterval関数を利用すれば、処理を途中で終わらせることができます。
それでは簡単なチンチロリンプログラムで動作を確認してみましょう。［サイコロを振る］ボタンでスタートします。3つのサイコロの目が1~6までの数字を連続でランダムに出力します。100回続きます。［サイコロを止める］ボタンで強制的にサイコロを止めることができます。
JavaScriptソースコード
本記事で紹介したサンプルプログラムをダウンロードできます。
ダウンロードをする前にお読みください
- サイトで紹介している記事の内容や公開しているプログラムの動作は100%保障するものではありません。
- 当プログラム使用による如何なる不具合やトラブル、損害の責任も負いかねます。
- 当プログラムは断り無く内容が変わることがあります。
- 当プログラムを別サイトで配布することは禁止します。
- サポートはいたしません。
- 自己責任にてご利用くださいませ。
以上をご確認の上、プログラムのダウンロードをお願いいたします。
サンプルプログラムのソースコード
ソースコードは折りたたんであります。［+］を押すと、折りたたまれたソースコードが開きます。［-］を押すと、コードは折りたたまれます。
+ program_014.jsを開く
//サイコロの目を出す関数
//spotsmin以上spotsmax以下の乱数が生成される。【(最大値 - 最小値 + 1) + 最小値】
function makeSpotsDice(){
var spotsmax = 6;//最大値
var spotsmin = 1;//最小値
var spotsdice = Math.random()*(spotsmax - spotsmin + 1) + spotsmin;//
spotsdice = Math.floor(spotsdice); //少数以下を丸める
return spotsdice;
}
//グローバル変数=======================================================================================
var stopFlg=0;//繰り返し処理に割り込んで中断させるためのフラグ
//=======================================================================================
//中断ボタンの処理
$("#stopDiceBtn").click(function() {
stopFlg = 1;//停止のフラグを立てる
});
//=======================================================================================
$("#DiceBtn").click(function() {
var n1,n2,n3;//サイコロの目
var dice1,dice2,dice3;//サイコロの目を画像表示するための変数
var count = 0;//繰り返した回数をカウント
//var timer;
stopFlg = 0;//フラグの初期化
//要素のキャッシュ
var diceCount = $("#diceCount");
var dice_n1 = $("#n1");
var dice_n2 = $("#n2");
var dice_n3 = $("#n3");
//一定時間ごとに処理を繰り返させる処理
var timer = setInterval(function(){
n1 = makeSpotsDice();//サイコロの目1
n2 = makeSpotsDice();//サイコロの目2
n3 = makeSpotsDice();//サイコロの目3
dice1 = "<span class=\"" + "dice" + n1 + "\"></span>";//cssスプライトの牌画を配置
dice2 = "<span class=\"" + "dice" + n2 + "\"></span>";//cssスプライトの牌画を配置
dice3 = "<span class=\"" + "dice" + n3 + "\"></span>";//cssスプライトの牌画を配置
//サイコロの目や回数を表示する
diceCount.empty().append(count);
dice_n1.empty().append(dice1);
dice_n2.empty().append(dice2);
dice_n3.empty().append(dice3);
//繰り返し処理を終了させる処理
if(count++ == 100||stopFlg==1){
clearInterval(timer);
}
}, 100);//0.1秒毎に処理を実行する
});
//=======================================================================================
//【おまけ】指定した値の範囲の整数を出力する関数
//min以上max以下の乱数が生成される。【(最大値 - 最小値 + 1) + 最小値】
function makeBetweenInt(min , max){
return Math.floor(Math.random()*(max - min + 1)) + min;//
}
//=======================================================================================
+ program_014.cssを開く
@charset "utf-8";
#n1 > span, #n2 > span, #n3 > span{
background-color:transparent;
background-image:url(../images/dice01.png);
background-repeat:no-repeat;
background-attachment:scroll;
display:inline-block;
}
.dice1{background-position:0px 0px;height:84px;width:84px;}
.dice2{background-position:-84px 0px;height:84px;width:84px;}
.dice3{background-position:-168px 0px;height:84px;width:84px;}
.dice4{background-position:0px -84px;height:84px;width:84px;}
.dice5{background-position:-84px -84px;height:84px;width:84px;}
.dice6{background-position:-168px -84px;height:84px;width:84px;}
#n1 ,#n2 , #n3 {
width: 100px;
height: 100px;
text-align: center;
}
#diceCount{
width: 50px;
text-align: center;
}
thead > tr> th{
text-align: center;
}
おすすめレンタルサーバー
エックスサーバー｜高速・高機能レンタルサーバー
「オールSSDの快適ハイスペック環境」「国内管理、大容量バックボーン」「独自SSLが無料」「FastCGIなどの高速化機能」「最新のPHP7を実装」など、高機能・高コストパフォーマンスなレンタルサーバーです。※当サイトも「エックスサーバー」で運用しています。
