/
index.md
65 lines (45 loc) · 1.37 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
---
title: window.cancelAnimationFrame
slug: Web/API/Window/cancelAnimationFrame
---
{{APIRef}}
**`window.cancelAnimationFrame()`** 方法取消一个先前通过调用 {{domxref("window.requestAnimationFrame()")}} 方法添加到计划中的动画帧请求。
## 语法
```js-nolint
cancelAnimationFrame(requestID)
```
### 参数
- `requestID`
- : 先前调用 {{domxref("window.requestAnimationFrame()")}} 方法时返回的 ID。
### 返回值
无({{jsxref("undefined")}})。
## 示例
```js
const requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
const cancelAnimationFrame =
window.cancelAnimationFrame || window.mozCancelAnimationFrame;
const start = Date.now();
let myReq;
function step(timestamp) {
const progress = timestamp - start;
d.style.left = `${Math.min(progress / 10, 200)}px`;
if (progress < 2000) {
// 在每次调用 requestAnimationFrame 时,注意更新 requestId
myReq = requestAnimationFrame(step);
}
}
myReq = requestAnimationFrame(step);
// 取消操作使用的是最后一个 requestId
cancelAnimationFrame(myReq);
```
## 规范
{{Specifications}}
## 浏览器兼容性
{{Compat}}
## 参见
- {{domxref("Window.requestAnimationFrame()")}}
- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}