# Pausing requestAnimationFrame

**URL:** <https://forum.kirupa.com/t/pausing-requestanimationframe/633995>\
**Category:** web dev\
**Created:** [November 25, 2015, 8:23pm UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995 "2015-11-25T20:23:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 25, 2015, 8:23pm UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/1 "2015-11-25T20:23:15Z")

</div>

This is a [response to a YouTube question](https://www.youtube.com/watch?v=rNsC1VI9388&lc=z12vz5044x3witen322fy1zw0yywirffr) where the question is around how you would pause a requestAnimationFrame loop. Here is something that has worked for me:

```
var isRunning = true;

function togglePause() {
  // toggle the value of isRunning
  isRunning = !isRunning;

  // call animate() if working
  if (isRunning) {
    animate();
  }
}

function animate() {

  document.body.textContent = Math.random() * 10000;

  // if not paused, do epic things!
  if (isRunning) {
    requestAnimationFrame(animate);
  }
}

//togglePause();

animate();

```

You can uncomment the `togglePause()` call towards the end to see this at work. There is no built-in “pause” functionality for `requestAnimationFrame`, so that is why I am taking this approach.

Cheers,  
Kirupa 🙂

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [November 28, 2015, 5:52pm UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/2 "2015-11-28T17:52:33Z")

</div>

> [@kirupa](#):
>
> There is no built-in “pause” functionality for requestAnimationFrame, so that is why I am taking this approach.

I was thinking something like this would also work:

```javascript
let rafID

function animate(){
    document.body.textContent = Math.random() * 10000
    rafID = requestAnimationFrame(animate)
}

function pause(){
    cancelAnimationFrame(rafID)
}

```

---

<div class="post-metadata">

**Author:** ![alltom](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alltom/32/7274_2.png) [@alltom](https://forum.kirupa.com/u/alltom)\
**Post date:** [November 30, 2015, 3:59am UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/3 "2015-11-30T03:59:53Z")

</div>

> [@kirupa](#):
>
> ```
> function animate() {
> 
> document.body.textContent = Math.random() * 10000;
> 
> // if not paused, do epic things!
> if (isRunning) {
> requestAnimationFrame(animate);
> }
> }
> 
> ```

Do you know if it makes a difference whether the call to requestAnimationFrame is at the beginning or the end of the `animate()` function? I thought the beginning of the function was an odd place to put it, but all the examples I looked at the other day had it there.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 30, 2015, 5:10pm UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/4 "2015-11-30T17:10:29Z")

</div>

> [@alltom](#):
>
> Do you know if it makes a difference whether the call to requestAnimationFrame is at the beginning or the end of the animate() function?

It doesn’t matter. Its only defining a callback which doesn’t cause anything to happen until the next animation loop when the callback (`animate`) is called. I think having it at the end of the function makes a little more sense (to me) since it represents something that happens after all of this code is run, so it better matches the progression of execution (plus it allows that code to set values for things like `isRunning`), but it doesn’t have to be.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [December 1, 2015, 4:50am UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/5 "2015-12-01T04:50:35Z")

</div>

Maybe it lets the caller get a better spot in the queue than any callees? That’s phrased poorly, so here’s an example:

```javascript
foo()

function foo(){
    requestAnimationFrame(foo)
    bar() // foo wants to be scheduled before bar
}

function bar(){
    requestAnimationFrame(bar)
}

```

Just speculating. Also, if your function takes 20ms to run, and the scheduler is using some time-based weights, it’s maybe better to call early on.

Edit: It seems like there’d be a lot of performant ways to cheat if there were some heuristic that assumed that functions would call rAF near their end, so it’d make sense to try to game that heuristic. I certainly don’t know that that’s a real heuristic, but it seems mildly reasonable.

@alltom

---

<div class="post-metadata">

**Author:** ![alltom](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alltom/32/7274_2.png) [@alltom](https://forum.kirupa.com/u/alltom)\
**Post date:** [January 22, 2016, 6:40am UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/6 "2016-01-22T06:40:33Z")

</div>

Thanks for the speculation, all. 🙂 Another thing occurred to me after reading your replies: maybe it’s defensive programming? If the scheduling is the same regardless of when you call `requestAnimationFrame`, from a flow control point of view, this:

```
function foo() {
  requestAnimationFrame(foo);
  // ... work ...
}

```

could be shorthand for this:

```
function foo() {
  try {
    // ... work ...
  } finally {
    requestAnimationFrame(foo);
  }
}
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 22, 2016, 7:03pm UTC](https://forum.kirupa.com/t/pausing-requestanimationframe/633995/7 "2016-01-22T19:03:57Z")

</div>

I find that a bit **_too_** defensive haha 😛