promise&policy 

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

 

posted @ 2022-05-07 10:43  苹果π  阅读(33)  评论(0)    收藏  举报