<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>promise proxy</title>
</head>
<body>
<input type="text" id="input" />
<p id="show"></p>
<p>
防抖的定义：事件响应函数在一段时间后才会执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用，则执行相应逻辑。
</p>
<p>防抖的使用场景：scroll事件滚动触发；搜索框输入查询；表单验证；按钮的提交事件；浏览器的窗口缩放；</p>
<p>如果持续地去触发事件，每隔一段时间，只执行一次事件；</p>
<p>DOM元素的拖拽；射击游戏；计算鼠标移动的距离，监听scroll滚动；</p>
<script>
let a = `1：每个异步操作都看做一个任务，每个任务都有两个阶段和三个状态，分别是未决 unsettled 阶段 和 已决阶段 settled ，三个状态是 pending 等待
fulfiled 成功态 rejected 失败态
2：任务中各个状态不可逆转，只能有 pending 转为 fulfilled 或者 rejected 的状态
3：在由未决阶段转为已决阶段时，pending态转为 fulfilled 的操作称为 resolve，pending态转为 rejected 操作称为 rejected
4：每个任务都会提供一个then方法，有两个回调参数，分别是 onFulfilled onRejected`;
const PENDING = 'pending';
const FULFILLED = 'fulfiled';
const REJECTED = 'rejected';
class myPromise {
constructor(executor) {
this.status = PENDING;
this.data = null;
this.reason = null;
this.dispatchers = [];
try {
executor(this.__resolve.bind(this), this.__reject.bind(this));
} catch (err) {
this.__reject(err);
}
}
__resolve(data) {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.data = data;
this.__dispatchers();
}
__reject(reason) {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
this.__dispatchers();
}
__dispatchers() {
if (this.status === PENDING) return;
for (const dispatcherConf of this.dispatchers) {
this.__dispatcher(dispatcherConf);
}
}
__dispatcher({ status, dispatcher, resolve, reject }) {
if (this.status !== status) return;
if (typeof dispatcher !== 'function') {
this.status === FULFILLED ? resolve(this.data) : reject(this.data);
}
try {
dispatcher(this.status === FULFILLED ? this.data : this.reason);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
return new myPromise((resolve, reject) => {
this.dispatchers.push(
{
status: FULFILLED,
dispatcher: onFulfilled,
resolve,
reject
},
{
status: REJECTED,
dispatcher: onRejected,
resolve,
reject
}
);
this.__dispatchers();
});
}
catch(err) {
this.then(null, onRejected);
}
}
const pro = new myPromise((resolve, reject) => {
setTimeout(function () {
reject(123);
}, 2000);
});
pro.then(
r => {
console.log(r);
},
e => {
console.log(e);
}
);
</script>
<script>
const input = document.getElementById('input');
const show = document.getElementById('show');
let obj = {};
let newObj = new Proxy(obj, {
set(target, key, value) {
if (key === 'text') {
input.value = value;
show.innerText = value;
}
return Reflect.set(target, key, value);
},
get(target, key) {
return Reflect.get(target, key);
}
});
input.addEventListener('keyup', function (e) {
newObj.text = e.target.value;
});
// let b = `防抖的使用场景：射击游戏，窗口的scroll事件，`
</script>
<script>
function promiseAll(_promises) {
return new Promise((resolve, reject) => {
let promises = [..._promises];
let count = 1;
let arr = [];
for (let i = 0; i < promises.length; i++) {
Promise.resolve(promises[i]).then(
data => {
arr[i] = data;
if (++count === promises.length) {
resolve(arr);
}
},
err => {
reject(err);
}
);
}
});
}
</script>
</body>
</html>
