SHOJI's Codeふとしたことでちょっと調べていたら、JavaScriptで「yield」文なるものを知った。
で、ブログなど見ると、この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>
赤い四角の中を黄色い四角が動いている、と思う。確かに処理によってはコードが短くなるかも。
本来このような使い方のためのものではないと思うが、いろいろと面白いことができそうだ。
ただ、サポートしているブラウザのことを考えると、実用的には使えないのかな。
 テーマ:JavaScript（ジャバスクリプト） - ジャンル:コンピュータ |
| ホーム |