読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptで、setTimeoutを使ってsleep処理

<スポンサーリンク>

1.前提

Google Feed APIを使って、RSSフィードを読み込むのを待ってから、次の処理を開始したい。
要は、JavaScriptで処理を止めて、何かを待ちたいとき。

これの次の記事にjQuery Deferredのサンプルを載せて、そっちの方がスマートなんだけど、まずは原始的にsetTimeoutを使ってやってみる。

2.基礎

sleep処理を行っているのは以下の部分。

function sleep(time, callback){
	setTimeout(callback, time);
}

sleep(4000, function (){ $('#js-news').ticker();} );

4秒(4000ミリ秒)の時間をおいてから、引数で指定した関数をコールバックしている。

3.サンプル

実際に使ってみよう!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ticker sample</title>
<!--
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
-->
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.ticker.js"></script>
<script type="text/javascript">
google.load("feeds", "1");

var rssFeedUrl = "http://dennou-kurage.hatenablog.com/feed";
$.gFeed = function(url, options, callback){
	var opt = $.extend({q: url, v: '1.0', num: 10}, options);
	if (!opt.q) return false;
	$.getJSON('http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
		opt,
		function(data){
			if (data) callback.call(this, data.responseData.feed);
		}
	);
}

$(function() {
	var $feed = $("#feed");
	var $jsNews = $("#js-news");

	$.gFeed(rssFeedUrl, {},
		function(feed){
			$(feed.entries).each(function() {
				$jsNews.append("<li>"+this.title).attr('class','news-item');
			});
			
		}
	);

	function sleep(time, callback){
		setTimeout(callback, time);
	}
	
	sleep(4000, function (){ $('#js-news').ticker();} );

});

</script>
</head>
<body>
<h2>jQuery News Ticker Example</h2>

<ul id="js-news" class="js-hidden">
</ul>

</body>
</html>

4.デモ

最初はRSSフィードを読み込んで、4秒待ってから・・・・
f:id:sho322:20140205194130j:plain

ティッカーが表示された!
f:id:sho322:20140205194138j:plain

5..参考

以下の記事を参考にしました。
http://d.hatena.ne.jp/chaichanPaPa/20080907/1220781475

JavaScriptで学ぶ関数型プログラミング

JavaScriptで学ぶ関数型プログラミング