- requestAnimationFrame
屏幕刷新频率, 每秒 60 次 16ms
如果 setinterval 刷新数据的的频率 要高于 屏幕刷新的频率, 就会发生丢帧,因为无法在每次刷新数据的时候,屏幕都及时刷新重绘.
``` 用setInterval // function move() { // box.style.left = box.offsetLeft + 20 + “px”; // } // // var timer = setInterval(function() { // move(); // if(box.offsetLeft >= 500) { // clearInterval(timer); // } // }, 30); 所有能用setInterval 的都可以更换成 setTimeout,自身调用的方式. // function move() { // box.style.left = box.offsetLeft + 20 + “px”; // var timer = setTimeout(function() {move();}, 30); // if(box.offsetLeft >= 500) { // clearTimeout(timer); // } // } // move();
requestAnimationFrame 的用法和 setTimeout 非常相似. function move() { box.style.left = box.offsetLeft + 20 + “px”; var timer = requestAnimationFrame(function() {move();},); if(box.offsetLeft >= 500) { cancelAnimationFrame(timer); } } move();
1
2
3
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
window.requestAnimation = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback,1000/60);
}
})();
window.cancelAnimationFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
}
})(); ``` > 疑问 封装的 setTimeout 能取消? ```
var a = function (callback) {
window.setTimeout(callback,1000);
}
var b = function (id) {
window.clearTimeout(id);
}
function fn () {
console.log(123);
}
var id = a(fn);
b(id); 如果有效, b 应该能阻止a 但是并没有阻止. ``` 我就说嘛,感觉不行,修改一下,返回一个 id ```
var a = function (callback) {
var id = window.setTimeout(callback,1000);
return id;
}
var b = function (id) {
window.clearTimeout(id);
}
function fn () {
console.log(123);
}
var id = a(fn);
b(id); ``` 稍微修改一下的 requestAnimationFrame ```
window.requestAnimation = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
return = window.setTimeout(callback,1000/60);
加一个return
}
})(); ```
1
2
3
4
5
localStorage.name = "123";
localStorage.arr = [1,2,3];
console.log(localStorage.name,typeof localStorage.name);
console.log(localStorage.arr,typeof localStorage.arr);
存储的都是字符串类型, 如果不是,自动转化为字符串类型.
问题, 同一个服务器, 不同文件, 能共享 local 和 sessionLocal嘛? localstorage 可以, sessionStorage 不可以.
1
2
3
history.pushState({},null,"index.html");
并不会刷新页面,也不会跳转.
history.replaceState({},null,"index1.html");
state 参数 ``` history.pushState({name:’mike’},null,”#index”);
1
2
3
window.addEventListener("popstate",function (e) {
console.log(e);
}) ```  > state + history.pushState(state,null,"#") + popstate 应用 ```
1
> 注意 hashchange 事件对象中似乎 没有 state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener("hashchange",function (e) {
console.log(e);
console.log(e.state.key);// undefined
}) ```    main.js ```
var num = 10000000;
var worker = new Worker("worker.js");
// 传输数据
worker.postMessage({num});
console.log("---");
worker.onmessage = function (e) {
console.log(e.data);
接收数据
断开连接
worker.terminate();
} ``` worker.js ``` function aaa (num) { var arr = []; for(var i = 0; i < num; i++) {
arr.push(i); } return arr; }
this.onmessage = function (e) { var num = e.data.num; //获取数据 console.log(e.data); // 传输数据 this.postMessage(aaa(num)); // 断开连接 this.close(); } ```
两者之间的通信, 数据传输, 靠的都是 postMessage 和 onmessage 监听事件.
worker能把一个同步的计算改成了异步的计算.
如果想断开连接, 主线程可以用 worker.terminate() 副线程可以用 this.close();
iframe 跨域 子传父 链接网络课笔记 9-iframe 跨域
