老是忘记的前端代码部分(一)防抖节流及数组去重

代码者,哪怕是你自己写的,一段时间不去看它,也会忘到九霄云外              

                                                                                                                       ——鲁迅(bushi)

于是就产生了再写一遍,并时不时看两眼的想法

一、防抖与节流

防抖

给一个执行期限,如果在期限内,那就重置(reset)他的时间

即简单记忆为:防抖(debounce)——事件触发reset time

设置俩参数,方法和时间:

function debounce(fn, time){

    let timer = null;

    return function (){

        clearTimeout(timer);

        //触发了就休想逃

           timer = setTimeout(()=>{fn.apply(this,arguments)},time);

    }

function alert(){console.log('success')}

const ele = document.getElementByClassName('de')[0];

ele.addEventlistener('input',debounce(alert, 1000));

节流

很简单,想象成你打开水龙头放水,一定时间内只出规定的水量

function throttle(fn, time){

//思路是flag标志位不为true,就说明正在节流中

    let flag = true;

    return function(){

        if(flag!==true) return ;

        flag=false;

        setTimeout(()=>{fn.apply(this,arguments);flag=true},time)

    }

}


ES5数组去重

ES5没有set,使用的是数组遍历加是否存在值相同的key位

ES5去重方法

使用key=(typeof a)+a是合理的做法,如果仅仅用a的值来做key,无法防止类型转化等问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 实现防抖 概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 例子:如果有人进电梯,那电梯...
    鱼小落阅读 415评论 0 0
  • 一.什么是函数防抖&节流 函数防抖函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触...
    王蕾_fd49阅读 440评论 0 1
  • 函数节流场景 例如:实现一个原生的拖拽功能(如果不用H5 Drag和Drop API),我们就需要一路监听mous...
    凡凡的小web阅读 809评论 0 0
  • Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的...
    燕自浩阅读 5,979评论 0 1
  • 函数节流 函数节流,throttle:某个函数在特定时间段内只执行第一次,周而复始,直到指定时间段结束。 节流是在...
    hellomyshadow阅读 258评论 0 1