<!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>