JS: how to use generator and yield in a callback

Question

I use JS generator to yield a value in a callback of setTimeout:

function* sleep() {
  // Using yield here is OK
  // yield 5; 
  setTimeout(function() {
    // Using yield here will throw error
    yield 5;
  }, 5000);
}

// sync
const sleepTime = sleep().next()

Why I can't yield values inside a callback in the generator?

Answer 1

function* declaration is synchronous. You can yield a new Promise object, chain .then() to .next().value to retrieve resolved Promise value

function* sleep() {
  yield new Promise(resolve => {
    setTimeout(() => {
      resolve(5);
    }, 5000);
  })
}

// sync
const sleepTime = sleep().next().value
  .then(n => console.log(n))
  .catch(e => console.error(e));

Answer 2

Extending the guest271314's answer.

The below code yields in a loop. Thus can yield more than once.

async function* foo(loopVal) {
  for(let i=0;i<loopVal;i++){
    yield new Promise(resolve => {
      setTimeout(() => {
        resolve(i);
      }, 5000);
    })
  }
}

(async function() {
  for await (const num of foo(5)) {
    console.log(num);
  }
})();

Answer 3

To directly answer the question, it is not possible to do this using the "*" / "yield" syntax. From here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield

...the "yield" keyword may only be used directly within the generator function that contains it. "It cannot be used within nested functions" such as callbacks.

The unhelpful answer to the OP's question of "why" is that it is prohibited by the ECMAScript language specification, at least in strict mode: https://262.ecma-international.org/9.0/#sec-generator-abstract-operations

For more of an intuition of why: the implementation of a generator is that the "yield" keyword pauses execution of its generator function. The execution of the generator function is otherwise ordinary, and when it returns, the iterable that it generated ends. That signals to the caller that no more values are coming, and any loop waiting for it will also end. After that, there's no opportunity to yield anything to any interested caller, even if the nested callback runs again.

Although a callback or other nested function can bind variables from the outer generator, it could escape the generator's lifetime and be run any other time / place / context. This means the desired yield keyword may have no function to pause, and no caller or loop to yield a value to. I would speculate that the strict mode syntax error was put here to save code authors from having something silently undesirable happen.

That said, the generator syntax is not necessary to create the OP's desired effect. When the goal is just to get "next()" to work, or to participate in the async iterator protocol ("for await (...)"), those protocols can be conformed to using ordinary functions and objects, without need for yield. The protocol you want to conform to is documented here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

...the other answer mentioning EventIterator is an example of helper code that makes this easier to do.

Answer 4

I came to this question looking for a way to convert a callback that is called every so often (e.g. a Node stream, event listener, or setInterval callback) into an async iterable, and after some research I found this NPM package that does all that: EventIterator.

EventIterator is a small module that greatly simplifies converting event emitters, event targets, and similar objects into EcmaScript async iterators. It works in browser and Node.js environments.

A basic setInterval iterable:

import { EventIterator } from "event-iterator"
const counter = ms =>
  new EventIterator(({ push }) => {
    let count = 0
    const interval = setInterval(() => push(++count), ms)
    return () => clearInterval(interval)
  })

for await (const count of counter(1000)) console.log(count)

(think of push like yield).

Though this doesn't technically answer the question, the accepted answer doesn't really answer it either, and this solution seems pretty close to what the OP was looking for.