Coroutine in Js

À¯´ÏƼ¿¡¼­´Â ÄÚ·çƾÀ» ÀÚÁÖ »ç¿ë ÇÑ´Ù.
ºñÁÖ¾ó È¿°ú¸¦ ÁÙ¶§³ª Á¤ÇØÁø ½Ã°£ µ¿¾È ¼øÂ÷ÀûÀ¸·Î ó¸® ÇÒ¶§ ¿ä±äÇÏ°Ô »ç¿ë µÉ ¼ö ÀÖ´Ù.

"generator base"¸¦ ¼³¸íÇÒ¶§ ÄÚ·çƾÀ» Èä³»³»°í ÀÖ¾úÁö¸¸ ¹º°¡ ¸¹ÀÌ ºÎÁ·ÇØ º¸ÀÌ´Â Äڵ忴´Ù.
tutorial06.html

¿øÇÏ´Â Á¶°ÇÀº ´ÙÀ½°ú °°´Ù.
  • requestAnimationFrameÀ» ÅëÇØ ·çÇÁ¸¦ ½ÇÇàÇÑ´Ù.
  • ·çÇÁ ½ÇÇàÀ» ¹æÇØ ÇÏÁö ¸»°í ÄÚ·çƾÀ» ½ÇÇà ÇÑ´Ù.
ÇÁ·¹ÀÓ¿÷Àº babysitter Äڵ带 ±×´ë·Î »ç¿ë ÇÏ°í ÀÖ´Ù.
ÀÀ¿ë ÄÚµå´Â townewgokgok¿¡¼­ °¡Á®¿Ô´Ù.

»ç¿ë ¹æ¹ý :

1. requestAnimationFrame ÇÁ·¹ÀÓ¿÷¿¡ coroutine.update ÇÔ¼ö ³¢¿ö ³Ö±â
update ÇÔ¼ö ¾Æ±Ô ¸ÕÆ®´Â ÇÁ·¹ÀÓ¿÷ÀÇ ½Ã°£ Â÷À̸¦ ¹Ð¸®¼¼ÄÁµå ´ÜÀ§¸¦ ÁÖ¸é µÈ´Ù.

    var lastFrameTime = Date.now();
    function updateFrame() {
        var thisFrameTime = Date.now();
        var deltaTime = thisFrameTime - lastFrameTime;
        lastFrameTime = thisFrameTime;
        coroutine.update(deltaTime);
        requestAnimationFrame(updateFrame);
    }
    updateFrame();

2. ÀÀ¿ë ÄÚµå´Â ´ÙÀ½°ú °°´Ù.

coroutine.add ÇÔ¼ö¿¡ generator ÇÔ¼ö¸¦ Ãß°¡ÇÏ¸é µÈ´Ù.

´ÙÀ½ÀÇ ¸í·ÉÀ» ·çÇÁ ¾È¿¡¼­ ¼øÂ÷ÀûÀ¸·Î ó¸® ÇÑ´Ù.
  • waitCount : 1ºÎÅÍ 10±îÁö Ä«¿îÆ® ÇÑ´Ù.
  • waitFunc(fadeOut) : fadeOut È¿°ú¸¦ ÁØ´Ù.
  • waitFunc(fadeIn) : fadeIn È¿°ú¸¦ ÁØ´Ù.
  • coroutine.waitForSeconds : ƯÁ¤ ½Ã°£ µ¿¾È ´ë±â ÇÑ´Ù.
  • message : ¸Þ¼¼Áö¸¦ Ãâ·ÂÇÑ´Ù.
  • waitInput : ÀÔ·ÂÀ» ±â´Ù¸°´Ù.
  • waitFunc(fadeOut) : fadeOut È¿°ú¸¦ ÁØ´Ù.
  • waitFunc(fadeIn) : fadeIn È¿°ú¸¦ ÁØ´Ù.
  • message : ¸Þ¼¼Áö¸¦ Ãâ·ÂÇÑ´Ù.
  • waitInput : ÀÔ·ÂÀ» ±â´Ù¸°´Ù.

    coroutine.add(function*(dt) {
        updateLuminance();
        dt = yield undefined;
        dt = yield* waitCount();
        dt = yield* waitFunc(fadeOut);
        dt = yield* waitFunc(fadeIn);
        dt = yield* coroutine.waitForSeconds(0.5);
       
        message('¾È³çÇϼ¼¿ä. °ÔÀÓÀ» ½ÃÀÛ ÇÒ·Á¸é');
        message('"Enter"Å°¸¦ ´­·¯ ÁÖ¼¼¿ä!!!');
        dt = yield* waitInput();
        dt = yield* waitFunc(fadeOut);
        dt = yield* waitFunc(fadeIn);
        message('´ç½ÅÀº ¸¶¹ý»ç·Î Á¶¼±ÀÇ ´Ü±ºÀ» ±¸ÇØ¾ß ÇÕ´Ï´Ù.'); 
        dt = yield* waitInput();
    });

coroutine.js ¼¼ºÎ ÄÚµå ¼³¸í

next ÀÎÀÚ¿¡´Â delta timeÀ» ¾Æ±Ô¸ÕÆ®·Î ³Ñ°ÜÁØ´Ù.
var done = c.next(dt).done;

ÀÛ¾÷ÀÌ ³¡³ª¸é done °ªÀÌ true°¡ µÈ´Ù.
¹è¿­ slice·Î »èÁ¦ ÇÑ´Ù.

coroutine.update = function(dt) {
    var i = 0;
    while(i < coroutine.job.length)
    {
        var c = coroutine.job[i];
        // this passes delta-time to the coroutine using magic
        var done = c.next(dt).done;

        // remove any couroutines that have finished
        if(done)
            coroutine.job.splice(i, 1);
        else
            i++;
    }
}

coroutine.waitForSeconds ÇÔ¼ö·Î ƯÁ¤ ½Ã°£ ¸¸Å­ ´ë±âÇÑ´Ù.

coroutine.waitForSeconds = function*(durationSec) {
    var durationMs = durationSec * 1000;
    var startMs = Date.now();
    var dt = 0;
    while (Date.now() - startMs < durationMs) {
        dt = yield undefined;
    }
    return dt;
}

´Ù¿î·Îµå :
corutine_test.html
main.js
coroutine.js
corutine_test.zip

°á°ú°¡ ³ª¿Ã¶§ ±îÁö °úÁ¤Áß¿¡ ÀÛ¼ºµÈ Å×½ºÆ® ÄÚµåÀÌ´Ù.  ±»ÀÌ º¼ ÇÊ¿ä´Â ¾ø´Ù.
corutine_test Äڵ尡 ÀÌÇØ ¾ÈµÈ´Ù¸é Âü°í ÇÑ´Ù.
corutine_test_old1.zip
corutine_test_old2.zip

ÂüÁ¶)
°Ë»ö¾î : requestanimationframe corutine

wilbefast/babysitter.js
https://gist.github.com/wilbefast/3ac3735ca2dbefc7d0ba

web °ÔÀÓ¿¡ ÀÀ¿ë
https://qiita.com/townewgokgok/items/925b7024ff6dd204c770

zenmumbler/coroutine.html
https://gist.github.com/zenmumbler/ec3179b030fbe1a5ec3b4c8968ffccdf

yield* ¶õ?
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/yield*