流程控制--链式调用+promise

·  阅读 456

搜索优化

我们在进行搜索或则表单验证的时候,用户进行多次输入, 我们一般采用最后一刻输入完成的或者最后请求的响应数据。

这里有两种做法。

1、防抖

不管事件触发频率多高,一定在事件触发n秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。

function debounce(event, time) {
   let timer = null;
   return function(...args) {
     clearTimeout(timer);
     timer = setTimeout(()=> {
       event.apply(this, args);
     })
   }
}

复制代码

2、promise

多次触发promise请求, 使用最后请求返回的数据.

function dehancePromise(axoisfn) {
   let searchIndex = 0;
   return ()=> {
      let _searchIndex = searchIndex + 1;
      searchIndex++;
      return new Promise((resolve, reject)=> {
        axoisfn().then((value)=> {
           if (_searchIndex === searchIndex) { 
              resolve(value); 
            } else { 
              resolve({ msg: `not last promise${value}` }); 
            }; 
        })
     }) 
  }
}
let count = 0;
const axoisfn=(time=300)=>{
  return new Promise((resolve, reject)=>{
   setTimeout(()=>{
     resolve(count++);
   }, time)
  })
}
const result = dehancePromise(axoisfn);
result().then((value)=>console.log(value));
result().then((value)=>console.log(value));
复制代码

image.png

流程控制 + 链式调用

1、链式调用实现 this: 如果构造函数返回this或则返回当前所在函数的引用.

异步this: 每个方法返回this串接所有this,创建一个异步队列添加每个方法注册的fn. 这样所有任务放到任务队列里面,通过一个 方法有序执行队列里面的任务.(通俗来说链式注册和执行调用不在一个事件循环里面)

function Person(name) {
  return new Man(name);
};

function Man(name) {
    this.task = [];
    let fn = ()=>{
      console.log(name)
      this.next();
    }
    this.task.push(fn);
    setTimeout(()=> {
       this.next();
    })
    return this;
}
Man.prototype.firstWait = function(time) {
   console.time("firstSleep");
   let that = this;
   let fn = ()=> {
     setTimeout(()=>{
       console.timeEnd('firstSleep');
       that.next();
     }, time)
   };
   this.task.unshift(fn);
   return this;
}
Man.prototype.wait = function(time) {
   console.time("Sleep");
   let that = this;
   let fn = ()=> {
     setTimeout(()=>{
       console.timeEnd('Sleep');
       that.next();
     }, time)
   };
   this.task.push(fn);
   return this;
}
Man.prototype.eat = function(food) {
   let that = this;
   let fn = ()=>{
      console.log(`eat: ${food}`);
      that.next();
   }
   this.task.push(fn);
   return this;
}
Man.prototype.next = function() {
  let fn = this.task.shift();
  fn && fn();
}
Person('Tony').eat('apple').wait(500).firstWait(1000);

复制代码

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改