防抖和节流的理解以及和闭包的应用

共同的一点是两者都用了闭包,即return函数内部使用外部函数的方式。

防抖是每次都执行函数,使用清除每次的执行,最后一次执行函数。

节流是定义一个布尔变量通过变量的状态的是否改变只执行一次函数。

防抖:

functiondebounce(fn,wait) {

vartimeout =null;// 创建一个标记用来存放定时器的返回值

returnfunction() {

clearTimeout(timeout);//清除定时器

//创建新的 setTimeout

timeout =setTimeout(function(){

fn();

        }, wait);

    };

}

// 处理函数

functionhandle() {

console.log(document.getElementById("kw").value);

}


//输入框事件

document.getElementById("kw").addEventListener('input',debounce(handle,5000));


节流:

functionthrottle(fn,delay){

varcanRun=true;//通过闭包保存该变量

returnfunction(){

if(!canRun)return;//立刻返回

canRun=false;

setTimeout(function(){

fn();

canRun=true;

            },delay);

      };

}

functionhandle(){

console.log(123);

}

window.addEventListener("scroll",throttle(handle,2000));

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

推荐阅读更多精彩内容

  • 看了《JavaScript高级程序设计》和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖...
    编程小世界阅读 3,982评论 0 1
  • 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件时都...
    京巴_2cc6阅读 3,989评论 0 0
  • 1. 函数 1.1 函数的 3 种定义方法 1.1.1 函数声明 //ES5 functiongetSum(){}...
    Mrssssss阅读 2,972评论 0 0
  • 防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案 debounce,去抖动。策略是当事件被触发时,设定一个...
    皇甫圣坤阅读 2,905评论 0 0
  • //1、防抖:规定一个期限时间,在首次触发事件时,不利己执行回调函数,而是在期限时间后在执行,如果期限时间内回调函...
    38ae78c953e7阅读 1,644评论 1 1