ColaDaddyz

ColaDaddyz 查看完整档案

杭州编辑南京邮电大学  |  软件工程 编辑滴滴  |  资深研发工程师 编辑 github.com/ColaDaddyz 编辑
编辑

前端开发工程
主要负责移动端的开发,有zepto,jQuery,react,node,css开发经验
目前主要关注于性能优化,工程化,提升团队效率

个人动态

ColaDaddyz 回答了问题 · 3月5日

Cannot read property 'call' of undefined 报错问题

看一下调用栈吧,我猜测是有函数调用了call方法,类似 fun.call(),但是 fun 未定义

关注 2 回答 1

ColaDaddyz 回答了问题 · 3月5日

【求助】小程序制作分销商城,大家是怎么把推荐的人记录到数据库

推荐转发或者生成二维码链接的时候,把当前人的用户信息作为参数拼在url上,比如https://xx?rec=123;好友访问以后判断url上是否有rec这个参数,有的话就是推荐人

关注 3 回答 2

ColaDaddyz 回答了问题 · 2019-07-23

解决求一个同步请求队列的方法 - JavaScript(axios)

写一个简单的伪代码,大概逻辑我觉得应该是这样的

let index = 0

// 异步请求
function ajaxData(){
    // 请求获取数据的逻辑
}

function fetch(){
    index++
    ajaxData()
        .then(fetch) // 请求成功后发起下一次请求
        .catch(err=>{
            // 处理异常
        })
}

fetch()

关注 7 回答 7

ColaDaddyz 关注了标签 · 2019-07-23

typescript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方。包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

关注 1895

ColaDaddyz 关注了标签 · 2019-07-23

linux

Linux是一种自由和开放源代码的类Unix计算机操作系统。目前存在着许多不同的Linux,但它们全都使用了Linux内核。Linux可安装在各种各样的计算机硬件设备,从手机、平板电脑、路由器和视频游戏控制台,到台式计算机,大型机和超级计算机。

Linux家族家谱图,很全很强大!! 图中可以清楚的看出各个Linux发行版的血缘关系。无水印原图:http://url.cn/5ONhQb

关注 64162

ColaDaddyz 关注了标签 · 2019-07-23

mongodb

MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型。Mongo最大的特点是他支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引。

关注 10213

ColaDaddyz 关注了标签 · 2019-07-23

微信小程序

微信小程序开发工具,技巧

关注 892

ColaDaddyz 评论了文章 · 2018-09-17

聊聊lodash的debounce实现

本文同步自我的Blog

前段时间团队内部搞了一个代码训练营,大家组织在一起实现 lodashthrottledebounce,实现起来觉得并不麻烦,但是最后和官方的一对比,发现功能的实现上还是有差距的,为了寻找我的问题,把官方源码阅读了一遍,本文是我阅读完成后的一篇总结。

本文只会列出比较核心部分的代码和注释,如果对全部的源码有兴趣的欢迎直接看我的repo

什么是throttle和debounce

throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器,这里只做简单的介绍,如果想了解更多关于这两个定义的细节可以看下后文给出的一张图片,或者阅读一下lodash的文档

throttle:将一个函数的调用频率限制在一定阈值内,例如 1s 内一个函数不能被调用两次。

debounce:当调用函数n秒后,才会执行该动作,若在这n秒内又调用该函数则将取消前一次并重新计算执行时间,举个简单的例子,我们要根据用户输入做suggest,每当用户按下键盘的时候都可以取消前一次,并且只关心最后一次输入的时间就行了。

lodash 对这两个函数又增加了一些参数,主要是以下三个:

  • leading,函数在每个等待时延的开始被调用

  • trailing,函数在每个等待时延的结束被调用

  • maxwait(debounce才有的配置),最大的等待时间,因为如果 debounce 的函数调用时间不满足条件,可能永远都无法触发,因此增加了这个配置,保证大于一段时间后一定能执行一次函数

这里直接剧透一下,其实 throttle 就是设置了 maxwaitdebounce,所以我这里也只会介绍 debounce 的代码,聪明的读者们可以自己思考一下为什么。

我的实现与lodash的区别

我自己的代码实现放在我的repo里,大家有兴趣的可以看下。之前说过我的实现和 lodash 有些区别,下面就用两张图来展示一下。

这是我的实现

这是lodash的实现

这里看到,我的代码主要有两个问题:

  1. throttle 的最后一次函数会执行两次,而且并非稳定复现。

  2. throttle 里函数执行的顺序不对,虽然我的功能实现了,但是对于每一次 wait 来说,我都是执行的 leading 那一次

lodash 的实现解读

下面,我就会带着这几个问题去看看 lodasah 的代码。

官方代码的实现也不是很复杂,这里我贴出一些核心部分代码和我阅读后的注释,后面会讲一下 lodash 的大概流程:

function debounce(func, wait, options) {
    let lastArgs,
        lastThis,
        maxWait,
        result,
        timerId,
        lastCallTime

    // 参数初始化
    let lastInvokeTime = 0 // func 上一次执行的时间
    let leading = false
    let maxing = false
    let trailing = true

    // 基本的类型判断和处理
    if (typeof func != 'function') {
        throw new TypeError('Expected a function')
    }
    wait = +wait || 0
    if (isObject(options)) {
        // 对配置的一些初始化
    }

    function invokeFunc(time) {
        const args = lastArgs
        const thisArg = lastThis

        lastArgs = lastThis = undefined
        lastInvokeTime = time
        result = func.apply(thisArg, args)
        return result
    }

    function leadingEdge(time) {
        // Reset any `maxWait` timer.
        lastInvokeTime = time
        // 为 trailing edge 触发函数调用设定定时器
        timerId = setTimeout(timerExpired, wait)
        // leading = true 执行函数
        return leading ? invokeFunc(time) : result
    }

   function remainingWait(time) {
        const timeSinceLastCall = time - lastCallTime // 距离上次debounced函数被调用的时间
        const timeSinceLastInvoke = time - lastInvokeTime // 距离上次函数被执行的时间
        const timeWaiting = wait - timeSinceLastCall // 用 wait 减去 timeSinceLastCall 计算出下一次trailing的位置

        // 两种情况
        // 有maxing:比较出下一次maxing和下一次trailing的最小值,作为下一次函数要执行的时间
        // 无maxing:在下一次trailing时执行 timerExpired
        return maxing
            ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
            : timeWaiting
    }

    // 根据时间判断 func 能否被执行
    function shouldInvoke(time) {
        const timeSinceLastCall = time - lastCallTime
        const timeSinceLastInvoke = time - lastInvokeTime

        // 几种满足条件的情况
        return (lastCallTime === undefined //首次
            || (timeSinceLastCall >= wait) // 距离上次被调用已经超过 wait
            || (timeSinceLastCall < 0) //系统时间倒退
            || (maxing && timeSinceLastInvoke >= maxWait)) //超过最大等待时间
    }

    function timerExpired() {
        const time = Date.now()
        // 在 trailing edge 且时间符合条件时,调用 trailingEdge函数,否则重启定时器
        if (shouldInvoke(time)) {
            return trailingEdge(time)
        }
        // 重启定时器,保证下一次时延的末尾触发
        timerId = setTimeout(timerExpired, remainingWait(time))
    }

    function trailingEdge(time) {
        timerId = undefined

        // 有lastArgs才执行,意味着只有 func 已经被 debounced 过一次以后才会在 trailing edge 执行
        if (trailing && lastArgs) {
            return invokeFunc(time)
        }
        // 每次 trailingEdge 都会清除 lastArgs 和 lastThis,目的是避免最后一次函数被执行了两次
        // 举个例子:最后一次函数执行的时候,可能恰巧是前一次的 trailing edge,函数被调用,而这个函数又需要在自己时延的 trailing edge 触发,导致触发多次
        lastArgs = lastThis = undefined
        return result
    }

    function cancel() {}

    function flush() {}

    function pending() {}

    function debounced(...args) {
        const time = Date.now()
        const isInvoking = shouldInvoke(time) //是否满足时间条件

        lastArgs = args
        lastThis = this
        lastCallTime = time  //函数被调用的时间

        if (isInvoking) {
            if (timerId === undefined) { // 无timerId的情况有两种:1.首次调用 2.trailingEdge执行过函数
                return leadingEdge(lastCallTime)
            }
            if (maxing) {
                // Handle invocations in a tight loop.
                timerId = setTimeout(timerExpired, wait)
                return invokeFunc(lastCallTime)
            }
        }
        // 负责一种case:trailing 为 true 的情况下,在前一个 wait 的 trailingEdge 已经执行了函数;
        // 而这次函数被调用时 shouldInvoke 不满足条件,因此要设置定时器,在本次的 trailingEdge 保证函数被执行
        if (timerId === undefined) {
            timerId = setTimeout(timerExpired, wait)
        }
        return result
    }
    debounced.cancel = cancel
    debounced.flush = flush
    debounced.pending = pending
    return debounced
}

这里我用文字来简单描述一下流程:

首次进入函数时因为 lastCallTime === undefined 并且 timerId === undefined,所以会执行 leadingEdge,如果此时 leading 为 true 的话,就会执行 func。同时,这里会设置一个定时器,在等待 wait(s) 后会执行 timerExpired,timerExpired 的主要作用就是触发 trailing。

如果在还未到 wait 的时候就再次调用了函数的话,会更新 lastCallTime,并且因为此时 isInvoking 不满足条件,所以这次什么也不会执行。

时间到达 wait 时,就会执行我们一开始设定的定时器timerExpired,此时因为time-lastCallTime < wait,所以不会执行 trailingEdge。

这时又会新增一个定时器,下一次执行的时间是 remainingWait,这里会根据是否有 maxwait 来作区分:

  • 如果没有 maxwait,定时器的时间是 wait - timeSinceLastCall,保证下一次 trailing 的执行。

  • 如果有 maxing,会比较出下一次 maxing 和下一次 trailing 的最小值,作为下一次函数要执行的时间。

最后,如果不再有函数调用,就会在定时器结束时执行 trailingEdge。

我的问题出在哪?

那么,回到上面的两个问题,我的代码究竟是哪里出了问题呢?

为什么顺序图不对

研究了一下,lodash是比较稳定的在trailing时触发前一次函数调用的,而我的则是每次在 maxWait 时触发的下一次调用。问题就出在对于定时器的控制上。

因为在编码时考虑到定时器和 maxwait 会冲突的问题,在函数每次被调用的时候都会 clearTimeout(timer),因此我的 trailing 判断其实只对整个执行流的最后一次有效,而非 lodash 所说的 trailing 控制的是函数在每个 wait 的最后执行。

而 lodash 并不会清除定时器,只是每次生成新的定时器的时候都会根据 lastCallTime 来计算下一次该执行的时间,不仅保证了定时器的准确性,也保证了对每次 trailing 的控制。

为什么最后会触发两次

通过打 log 我发现这种触发两次的情况非常凑巧,最后一次函数执行的时候,正好满足前一个时延的 trailing,然后自己这个 wait 的定时器也触发了,所以最后又触发了一次本次时延的 trailing,所以触发了两次。

理论上 lodash 也会出现这种情况,但是它在每次函数执行的时候都会删除 lastArgs 和 lastThis,而下次函数执行的时候都会判断这两个参数是否存在,因此避免了这种情况。

总结

其实之前就知道 debouncethrottle 的用途和含义,但是每次用起来都得去看一眼文档,通过这次自己实现以及对源码的阅读,终于做到了了熟于心,也发现自己的代码设计能力还是有缺陷,一开始并没有想的很到位。

写代码的,还是要多写,多看;慢慢做到会写,会看;与大家共勉。

查看原文

ColaDaddyz 回答了问题 · 2018-03-28

koa2 框架中的中间件同步还是异步的问题?

首先,可以先去看一下generator,async,await 相关的基础知识和原理,看看阮一峰的教程就行。async 主要是解决了异步操作的问题,我们可以不写Promise和callback,可以像调用同步方法一样执行一个异步方法。接下来回答问题
1、当然可以不用async和await,即便是你的中间件里有异步操作,也可以通过promise来处理,只不过 async 的语法写起来更像同步的,看起来更清爽
2、因为 await 后必须是一个 promise,所以next才设计成了promise(所以还是建议你先去看看原理)。不使用promise也可以达到串联效果,那么就要利用回调了;中间件的执行你要考虑一种情况,在a中间件里,我需要调用一个接口,接口返回后再进入下一个中间件,这其实就是一个异步的情况
3、还是回到最开始,async 只是一个方案,让我们写异步方法更爽,你可以不用

关注 3 回答 3

ColaDaddyz 回答了问题 · 2018-03-28

JS倒计时的问题

本地localStorage存储一个状态,比如叫 hasCountDown
一旦执行过了,设置 hasCountDown = true;
每次进页面时读取 hasCountDown,如果 hasCountDown === true 则不执行倒计时

关注 2 回答 2

认证与成就

  • 获得 146 次点赞
  • 获得 18 枚徽章 获得 1 枚金徽章, 获得 5 枚银徽章, 获得 12 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2016-02-04
个人主页被 1.5k 人浏览