Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
skyclouds2001 authored Sep 29, 2024
1 parent a7871cc commit 8e9d5f5
Show file tree
Hide file tree
Showing 14 changed files with 22 additions and 28 deletions.
2 changes: 1 addition & 1 deletion files/en-us/games/anatomy/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ Other methods of tackling the problem exist.

One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:

- Draw on `requestAnimationFrame` and update on a {{domxref("Window.setInterval", "setInterval()")}} or {{domxref("setTimeout()")}}.
- Draw on `requestAnimationFrame()` and update on a {{domxref("Window.setInterval", "setInterval()")}} or {{domxref("setTimeout()")}}.

- This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ drawLives();

## Improving rendering with requestAnimationFrame()

Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("Window.setInterval", "setInterval()")}}. Replace the following line:
Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("Window.setInterval", "setInterval()")}}. Replace the following line:

```js
interval = setInterval(draw, 10);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ You already know how to draw a ball from working through the previous article, s
## Defining a drawing loop

To keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. You can run a function over and over again using a JavaScript timing function.
Later on in the tutorial, we'll see how {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("Window.setInterval", "setInterval()")}} at first to create some looping logic.
Later on in the tutorial, we'll see how {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("Window.setInterval", "setInterval()")}} at first to create some looping logic.

Delete all the JavaScript you currently have inside your HTML file except for the first two lines, and add the following below them. The `draw()` function will be executed within `setInterval` every 10 milliseconds:

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/learn/accessibility/wai-aria_basics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ Let's look at a quick example — see [`aria-no-live.html`](https://github.com/m
</section>
```

Our JavaScript uses the {{domxref("Window/fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds:
Our JavaScript uses the {{domxref("Window.fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds:

```js
const intervalID = setInterval(showQuote, 10000);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ That means we need a way to execute our drawing functions over a period of time.

### Scheduled updates

First there's the {{domxref("Window.setInterval", "setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("Window.requestAnimationFrame", "requestAnimationFrame")}} functions, which can be used to call a specific function over a set period of time.
First there's the {{domxref("Window.setInterval", "setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} functions, which can be used to call a specific function over a set period of time.

- {{domxref("Window.setInterval", "setInterval()")}}
- : Starts repeatedly executing the function specified by `function` every `delay` milliseconds.
Expand Down
5 changes: 2 additions & 3 deletions files/en-us/web/api/cleartimeout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,5 @@ exception is thrown.
## See also

- {{domxref("setTimeout()")}}
- {{domxref("Window.setInterval", "setInterval()")}}
- {{domxref("Window.clearInterval", "clearInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
9 changes: 4 additions & 5 deletions files/en-us/web/api/settimeout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -460,8 +460,7 @@ See also the [`clearTimeout()` example](/en-US/docs/Web/API/clearTimeout#example
## See also

- [Polyfill of `setTimeout` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval)
- {{domxref("clearTimeout")}}
- {{domxref("Window.setInterval", "setInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.queueMicrotask()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
- {{domxref("Window.queueMicrotask()")}} and {{domxref("WorkerGlobalScope.queueMicrotask()")}}
5 changes: 2 additions & 3 deletions files/en-us/web/api/window/clearinterval/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ See {{domxref("Window.setInterval", "setInterval()")}} for examples.

## See also

- {{domxref("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("Window.setInterval()")}}
- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
5 changes: 2 additions & 3 deletions files/en-us/web/api/window/setinterval/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,6 @@ interval has completed before recursing.

- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval)
- {{domxref("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("Window.clearInterval()")}}
- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
5 changes: 2 additions & 3 deletions files/en-us/web/api/workerglobalscope/clearinterval/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ See {{domxref("Window.setInterval", "setInterval()")}} for examples.

## See also

- {{domxref("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("Window.clearInterval()")}}
- {{domxref("WorkerGlobalScope.setInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
5 changes: 2 additions & 3 deletions files/en-us/web/api/workerglobalscope/setinterval/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ See the same name section under {{domxref("Window.setInterval", "setInterval()")

- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval)
- {{domxref("setTimeout()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("Window.setInterval()")}}
- {{domxref("WorkerGlobalScope.clearInterval()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Looking for the {{domxref("Document")}} object, {{domxref("Window")}} object, an
- [Canvas 2D Context](https://html.spec.whatwg.org/multipage//#2dcontext) is a drawing API for [`<canvas>`](/en-US/docs/Web/HTML/Element/canvas).
- The [WebAssembly interface](https://webassembly.github.io/spec/js-api/) provides utilities for communication between JavaScript code and [WebAssembly](/en-US/docs/WebAssembly) modules.

Non-browser environments (like Node.js) often do not have DOM APIs — because they don't interact with a document — but they still usually implement many web APIs, such as [`fetch()`](/en-US/docs/Web/API/Window/fetch) and [`setTimeout()`](/en-US/docs/Web/API/setTimeout).
Non-browser environments (like Node.js) often do not have DOM APIs — because they don't interact with a document — but they still usually implement many web APIs, such as {{domxref("Window.fetch", "fetch()")}} and [`setTimeout()`](/en-US/docs/Web/API/setTimeout).

## JavaScript implementations

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/media/autoplay_guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ In the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API), a website or app can

## The autoplay Permissions Policy

In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The {{Glossary("HTTP")}} {{HTTPHeader("Permissions-Policy")}} header's [`autoplay`](/en-US/docs/Web/HTTP/Headers/Permissions-Policy/autoplay) directive is used to control which domains, if any, can be used to autoplay media. By default, the `autoplay` Permissions Policy is set to `self`, indicating that autoplay is permitted as they're hosted on the same domain as the document.
In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The {{Glossary("HTTP")}} {{HTTPHeader("Permissions-Policy")}} header's {{httpheader("Permissions-Policy/autoplay", "autoplay")}} directive is used to control which domains, if any, can be used to autoplay media. By default, the `autoplay` Permissions Policy is set to `self`, indicating that autoplay is permitted as they're hosted on the same domain as the document.

You can also specify an empty allowlist (`()`) to disable autoplay entirely, `*` to allow autoplay from all domains, or one or more specific origins from which media can be automatically played. These origins are separated by space characters.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/performance/fundamentals/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ In addition, transforms give you capabilities you might not otherwise have. Not

Calls to {{domxref("Window.setInterval", "setInterval()")}} run code at a presumed frame rate that may or may not be possible under current circumstances. It tells the browser to render results even while the browser isn't actually drawing; that is, while the video hardware hasn't reached the next display cycle. This wastes processor time and can even lead to reduced battery life on the user's device.

Instead, you should try to use {{domxref("window.requestAnimationFrame()")}}. This waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. Another benefit to this API is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). This will save battery life and prevent users from cursing your name into the night sky.
Instead, you should try to use {{domxref("Window.requestAnimationFrame()")}}. This waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. Another benefit to this API is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). This will save battery life and prevent users from cursing your name into the night sky.

#### Make events immediate

Expand Down

0 comments on commit 8e9d5f5

Please sign in to comment.