# Is "yield" a blocking operation in a cell

**URL:** <https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909>\
**Category:** Uncategorized\
**Created:** [June 21, 2018, 6:04pm UTC](https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909 "2018-06-21T18:04:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [June 21, 2018, 6:04pm UTC](https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909/1 "2018-06-21T18:04:08Z")

</div>

I’ve seen this technique in multiple notebooks:

```auto
  while (true) { 
    doSomeSVG(g);
    yield svg.node();
  }

```

There is clearly a “runner” of the generator calling “next” so maybe it is using a settimeout, or rAF?

I am converting my notebook to a JS version to have both worlds (the Good and the Bad & Ugly!)

My question is: I think tight yield loops are blocking operations in JS. How should I convert to a “runner” that uses async on the next calls? Or maybe I can just use the Observable std lib?

Example: running this on a blank page in the browser works, although too fast to see:

```auto
function* nextIntegerGenerator(index) {
  while (true) {
    yield index++
  }
}
nextInteger = nextIntegerGenerator(0)
for (let i = 0; i < 10; i++) {
  document.body.innerText = nextInteger.next().value
}

```

But this hangs the browser:

```auto
while (true) {
  document.body.innerText = nextInteger.next().value
}

```

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [June 21, 2018, 6:27pm UTC](https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909/2 "2018-06-21T18:27:23Z")

</div>

Hey Owen.

Not to be too RTFM about this, but I think these are the most helpful place to start with generators + async questions:

> **[Introduction to Generators](https://observablehq.com/@mbostock/introduction-to-generators)**
>
> An Observable notebook.

> **[Introduction to Asynchronous Iteration](https://observablehq.com/@mbostock/introduction-to-asynchronous-iteration)**
>
> An Observable notebook.

If you still have questions — of course we’re happy to help.

---

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [June 21, 2018, 7:04pm UTC](https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909/3 "2018-06-21T19:04:58Z")

</div>

RTFM is always good advice and Observable’s docs are great!

The Well Hidden question was basically how to translate to JS. For example:

- Should yields be translated to use an async runner in JS?  
I think “yes”
- can I use the [std lib](https://beta.observablehq.com/@mbostock/standard-library) in my own JS programs?  
I think “maybe”, but better to [use downloading-and-embedding-notebooks](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks).

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [June 21, 2018, 7:13pm UTC](https://talk.observablehq.com/t/is-yield-a-blocking-operation-in-a-cell/909/4 "2018-06-21T19:13:09Z")

</div>

In short: Observable cells that are generators are consumed by the runtime at 60 frames (60 evaluations) per second.

In raw JS, to run the generator cell at the same speed — you’ll want to set up a requestAnimationFrame() that calls `.next()` on it at the same speed.

And you can indeed use the [standard library](https://github.com/observablehq/notebook-stdlib) in your own programs. There’s really not much in it that is Observable-specific — rather, it’s a collection of JS primitives that are designed to be useful in the context of an Observable notebook, but doesn’t depend on running within one.