流程控制 链式调用 promise

搜索优化

咱们在进行搜索或则表单验证的时候，用户进行屡次输入， 咱们通常采用最后一刻输入完成的或者最后请求的响应数据。

这里有两种作法。

一、防抖

无论事件触发频率多高，必定在事件触发n秒后才执行，若是你在一个事件触发的 n 秒内又触发了这个事件，就以新的事件的时间为准，n秒后才执行，总之，触发完事件 n 秒内再也不触发事件，n秒后再执行。

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

复制代码

二、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));
复制代码

流程控制 + 链式调用

一、链式调用实现 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);

复制代码