SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.10<<123456789101112131415161718192021222324252627282930>>2017.12
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ふとしたことでちょっと調べていたら、JavaScriptで「yield」文なるものを知った。
で、ブログなど見ると、このyieldを使って、同期処理っぽいものを作ったりしてたので、自分でもちょっと書いてみた。
<html>
<head>
<script type="text/javascript;version=1.7">

Task = function(fn) {
this.func = fn;
};
Task.prototype = {
run: function() {
this.handler(this, this.func());
},
handler: function(self, gen) {
try {
var t = gen.next();
if( !t || 0>=t ) t = 1;
setTimeout(function(){self.handler(self,gen);}, t);
}
catch(e) {
}
}
}

window.onload = function()
{
var t1 = new Task(task1);
var t2 = new Task(task2);

t1.run();
t2.run();
};

function task1()
{
var box = document.getElementById("box1");

box.style.top = "0px";
while(true) {
for(var i=0;100>=i;i++) { box.style.left = i+"px"; yield i/2; }
for(var i=0;100>=i;i++) { box.style.top = i+"px"; yield i/2; }
for(var i=100;i>=0;i--) { box.style.left = i+"px"; yield i/2; }
for(var i=100;i>=0;i--) { box.style.top = i+"px"; yield i/2; }
}
}
function task2()
{
var box = document.getElementById("box2");

box.style.top = "0px";
while(true) {
for(var i=0;40>=i;i++) { box.style.left = i+"px"; yield i; }
for(var i=0;40>=i;i++) { box.style.top = i+"px"; yield i; }
for(var i=40;i>=0;i--) { box.style.left = i+"px"; yield i; }
for(var i=40;i>=0;i--) { box.style.top = i+"px"; yield i; }
}
}

</script>
</head>
<body>
<div id="box1" style="position:absolute;width:50px;height:50px;background-color:red;">
<div id="box2" style="position:relative;width:10px;height:10px;background-color:yellow;">
</div>
</div>
</body>
</html>


赤い四角の中を黄色い四角が動いている、と思う。確かに処理によってはコードが短くなるかも。
本来このような使い方のためのものではないと思うが、いろいろと面白いことができそうだ。
ただ、サポートしているブラウザのことを考えると、実用的には使えないのかな。
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。