最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS代码你能手撕多少

    正文概述 掘金(Daes)   2021-01-26   406

    1.实现promise.all方法

    第一种方式:

    Promise.prototype.all = function(arr) {
      const strings = Object.Prototype.toString;
      if(!arr || !arr.length || strings.call(arr) !== '[object Array]') {
        throw new TypeError('promise must be an Array');
      }
      const resArr = [];// 保存resolve结果
      for(let i = 0; i < arr.length; i++) {
        const p = arr[i];
        p.then(res => {
          resArr[i] = res; // 按顺序保存到数组里
        }).catch(e => {
          return Promise.reject(e); //有失败就返回失败信息 不再往后执行
        })
      }
      
      // 2.如果全部promise都成功回调 返回结果 []
      return Promise.resolve(resArr);
    }
    

    第二种:

    Promise.ptototype.all = function(promises) {
      if(promises.constructor !== Array) {
        throw new TypeError('arguments must be an Array')
      }
      let count = 0;
      const resArr = [];
      return new Promise(function(resolve, reject){
        promises.forEach((p, i) => {
          p.then(res => {
            count++;
            resArr[i] = res; // 保存到数组里
            // 当promise成功的索引等于传递长度时就调用成功函数
            count === promises.length && resolve(resArr);
          }, e => {
            reject(e); // 执行失败
          })
        })
      })
    }
    

    2.手撕Promise.race方法

    Promise.prototype.race = function(promises) {
      if(!promises || !promises.length) {
        return new Promise(); // 返回永久等待。
      }
      
      return new Promise((resolve, reject) => {
        promises.forEach((p) => {
          p.then(resolve, reject); // 谁先返回就调用谁。
        })
      })
    }
    

    Cookie 和 Session的区别?

    • 分别解释含义和用途
    • Cookie 的数据结构是什么?
    • Session 有效时间

    防抖和节流?

    防抖函数(debounce)

    非立即执行(执行最后一次)

    // 非立即执行
    // 接受两个参数 fn 函数体, wait 时间
    function debounce(fn, wait) {
      // 定时器变量 
      let timer = null;
      return function() {
        let that = this; 
        let args = arguments; // 保存执行传递进来的参数
        if(timer) clearTimeout(timer)// 在执行中就清空
        timer = setTimeout(function() {
          fn.call(that, ...args); // this指向调用的函数
        }, wait)
      }
    }
    

    立即执行(执行开始一次)

    function debounce(fn, wait) {
      let timer = null;
      return function() {
        const args = arguments;
        const that = this;
        
        const now = !timer; // 当没有定时器的时候就执行
        
        setTimeout(_ => timer = null, wait); // 执行到了就清空
        
        if(now) {
          fn.call(that, ...args);
        }
      }
    }
    

    节流函数(throttle)

    /**
    * 定时器版本
    */
    
    function throttle(fn, wait) {
      let timer = null;
      return function() {
        const args = arguments
        const that = this;
        if(timer) return; // 还在执行返回
        timer = setTimeout(function() {
          fn.call(that, ...args);
          clearTimeout(timer); // 执行完成清理定时器
        },wait)
      }
    }
    

    时间戳版本

    function throttle(fn, wait) {
      let now = 0;
      return function() {
        const args = arguments;
        const that = this;
        
        const _newDate = Date.now();
        
        if(newDate - now > wait) {
          fn.call(that, ...args);
          now = _newDate;
        }
      }
    }
    

    起源地下载网 » JS代码你能手撕多少

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元