Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

init documentation for cancelAnimationFrame() and requestAnimationFrame() of DedicatedWorkerGlobalScope interface #30880

Merged
merged 31 commits into from
Dec 14, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
cd5adf5
init
skyclouds2001 Dec 6, 2023
3b71eca
update example
skyclouds2001 Dec 7, 2023
0d992d7
update list
skyclouds2001 Dec 8, 2023
f13e476
style pretty
skyclouds2001 Dec 8, 2023
4456be9
update additional info
skyclouds2001 Dec 8, 2023
a71e7de
Apply suggestions from code review
skyclouds2001 Dec 8, 2023
aa534ae
remove extra comment
skyclouds2001 Dec 8, 2023
26d5453
update see also section
skyclouds2001 Dec 8, 2023
47758d1
Apply suggestions from code review
skyclouds2001 Dec 8, 2023
9a1e8b2
Merge branch 'main' into animation-frame
skyclouds2001 Dec 9, 2023
3e9870a
update
skyclouds2001 Dec 9, 2023
ce7f47c
Merge branch 'animation-frame' of https://github.com/skyclouds2001/co…
skyclouds2001 Dec 9, 2023
6c7bff1
Apply suggestions from code review
skyclouds2001 Dec 10, 2023
f656ae7
update
skyclouds2001 Dec 10, 2023
2d94ac0
update worker
skyclouds2001 Dec 11, 2023
348782e
better reflect confuse
skyclouds2001 Dec 11, 2023
ac2d10d
update
skyclouds2001 Dec 11, 2023
4cffa3f
update content
skyclouds2001 Dec 11, 2023
374deb6
Apply suggestions from code review
skyclouds2001 Dec 11, 2023
44b28a0
Apply suggestions from code review
skyclouds2001 Dec 14, 2023
fdf014e
Apply suggestions from code review
skyclouds2001 Dec 14, 2023
7e6335a
Update files/en-us/web/api/dedicatedworkerglobalscope/cancelanimation…
skyclouds2001 Dec 14, 2023
4ebea4c
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
69adf78
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
d98bbda
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
5f2acd3
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
ec3e9f1
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
83b6f16
Update files/en-us/web/api/dedicatedworkerglobalscope/cancelanimation…
teoli2003 Dec 14, 2023
839b919
Update files/en-us/web/api/dedicatedworkerglobalscope/cancelanimation…
teoli2003 Dec 14, 2023
9bcbb48
Update files/en-us/web/api/dedicatedworkerglobalscope/cancelanimation…
teoli2003 Dec 14, 2023
24abbf4
Update files/en-us/web/api/dedicatedworkerglobalscope/requestanimatio…
teoli2003 Dec 14, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
init
  • Loading branch information
skyclouds2001 committed Dec 6, 2023
commit cd5adf57580ac4f3dac9a3c1868896faff62a27e
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
title: "DedicatedWorkerGlobalScope: cancelAnimationFrame() method"
short-title: cancelAnimationFrame()
slug: Web/API/DedicatedWorkerGlobalScope/cancelAnimationFrame
page-type: web-api-instance-method
browser-compat: api.DedicatedWorkerGlobalScope.cancelAnimationFrame
---

{{APIRef}}

The **`cancelAnimationFrame()`** method of the {{domxref("DedicatedWorkerGlobalScope")}} interface cancels an animation frame request previously scheduled through a call to {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}.

## Syntax

```js-nolint
cancelAnimationFrame(handle)
```

### Parameters

- `handle`
- : The ID value returned by the call to {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} that requested the callback.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

### Return value

None ({{jsxref("undefined")}}).

## Examples

```js
const start = Date.now();

let handle;

function step(timestamp) {
const progress = timestamp - start;
console.log(progress);

handle = self.requestAnimationFrame(step);
}

self.addEventListener('message', (e) => {
// if receive a message to start, start the progress
if (e.data === 'start') {
handle = self.requestAnimationFrame(step);
}
// if receive a message to stop, just cancel the progress using the lastest handle
if (e.data === 'stop') {
self.cancelAnimationFrame(handle);
}
})
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
- {{domxref("Window.requestAnimationFrame()")}}
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
- {{domxref("Window.cancelAnimationFrame()")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
---
title: "DedicatedWorkerGlobalScope: requestAnimationFrame() method"
short-title: requestAnimationFrame()
slug: Web/API/DedicatedWorkerGlobalScope/requestAnimationFrame
page-type: web-api-instance-method
browser-compat: api.DedicatedWorkerGlobalScope.requestAnimationFrame
---

skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
{{APIRef}}

The **`requestAnimationFrame()`** method of the {{domxref("DedicatedWorkerGlobalScope")}} interface tells the
browser you wish to perform an animation. It requests the browser to call a
user-supplied callback function before the next repaint.

The frequency of calls to the callback function will generally match the display
refresh rate. The most common refresh rate is 60hz,
(60 cycles/frames per second), though 75hz, 120hz, and 144hz are also widely used.
`requestAnimationFrame()` calls are paused in most browsers when running in
background tabs or hidden {{ HTMLElement("iframe") }}s, in order to improve
performance and battery life.

> **Note:** Your callback function must call `requestAnimationFrame()` again if
> you want to animate another frame. `requestAnimationFrame()` is one-shot.

> **Warning:** Be sure always to use the first argument (or some other method for
> getting the current time) to calculate how much the animation will progress in
> a frame — **otherwise, the animation will run faster on high refresh-rate screens**.
> For ways to do that, see the examples below.

## Syntax

```js-nolint
requestAnimationFrame(callback)
```

### Parameters

- `callback`
- The function to call when it's time to update your animation for the next
repaint. This callback function is passed a single argument: a
{{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's
rendering (based on the number of milliseconds since
[time origin](/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin)).
- The timestamp is a decimal number, in milliseconds, but with a minimal
precision of 1 millisecond. The timestamp
value is also similar to calling {{domxref('performance.now()')}} at the start
of the callback function, but it is never the same value.
- When multiple callbacks queued by `requestAnimationFrame()` begin to fire in
a single frame, each receives the same timestamp even though time has passed
during the computation of every previous callback's workload.

### Return value

A `long` integer value, the request ID, that uniquely identifies the entry
in the callback list. This is a non-zero value, but you may not make any other
assumptions about its value. You can pass this value to
{{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}} to cancel the refresh callback request.

## Examples

```js
const start = Date.now();

let handle;

function step(timestamp) {
const progress = timestamp - start;
console.log(progress);

handle = self.requestAnimationFrame(step);
}

self.addEventListener('message', (e) => {
// if receive a message to start, start the progress
if (e.data === 'start') {
handle = self.requestAnimationFrame(step);
}
// if receive a message to stop, just cancel the progress using the lastest handle
if (e.data === 'stop') {
self.cancelAnimationFrame(handle);
}
})
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("Window.cancelAnimationFrame()")}}