onsen code monkey

個人的な日記とプログラミング備忘録です

【JavaScript】タイマー処理のメモ

JavaScript HTML 
<!doctype html>
<html>
<head>
<title>SPA</title>
<style type="text/css">
body {
width : 100%;
height : 100%;
overflow : hidden;
background-color : #777;
}

#spa {
position : absolute;
top : 8px;
left : 8px;
bottom : 8px;
right : 8px;
border-radius : 8px 8px 8px 8px;
background-color : #fff;
}
.spa-slider {
position : absolute;
bottom : 0;
right : 2px;
width : 300px;
height : 16px;
cursor : pointer;
border-radius : 8px 0 0 0;
background-color : #f00;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
(function() {
var requestAnimationFrame = window.requestAnimationFrame || 
　　　　　　　　　　　　　　　　　　　window.mozRequestAnimationFrame ||
　window.webkitRequestAnimationFrame || 
　　　　　　　　　　　　　　　　　　　window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
var cancelAnimationFrame = window.cancelAnimationFrame || 
　　　　　　　　　　　　　　　　　　　window.mozcancelAnimationFrame ||
　window.webkitcancelAnimationFrame || 
　　　　　　　　　　　　　　　　　　　window.mscancelAnimationFrame;
window.cancelAnimationFrame = cancelAnimationFrame;
})();


var startTime = new Date().getTime();　//描画開始時刻を取得
(function loop(){
//window.requestAnimationFrame(loop);
var requestId = window.requestAnimationFrame(loop); //戻り値を取得
var currentTime = new Date().getTime();　//経過時刻を取得
var status = (startTime - currentTime) // 描画開始時刻から経過時刻を引く
console.log(status);
window.cancelAnimationFrame(requestId); //戻り値をcancelAnimationFrameに渡してあげる
})();

var count = 0;
var countup = function(){
console.log(count++);
} 
var id = setInterval(function(){
countup();
if(count > 5){
clearInterval(id); //idをclearIntervalで指定
}
}, 1000);

setTimeout(countup, 7000);
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="spa">
<form name="myform">
<input name="myfile" type="file"/><br/>
<textarea name="output" cols="80" rows="10"></textarea>
<h1>aaaa</>
</form>
</div>
<div class="spa-slider">aaa</div>
</body>
</html>