【进阶篇】js的防抖节流函数

简介: 【进阶篇】js的防抖节流函数

防抖和节流函数

阅读目录

    • 一 .防抖函数
    • 二 .节流函数
    • 三 .个人理解两者的区别

    一、防抖函数

    1.1 概念:

      触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

    1.2 使用场景:

      就像是我的搜索栏功能,是在里面内容变化后就实时触发搜索事件,但是有时候我们输

      的内容很长,在没有输完的时候就触发了事件,这样对性能来说是不好的,造成了很多

      无用的请求,这时候就需要用到防抖函数,来让其在搜索内容变化后的200毫秒内如果

      没有再更改才发起请求。

    1.3 实现防抖函数的思路:

      在高频触发事件的时候,取消原来的延时事件。

    1.4 具体实现:

    function debounce( fn ){ // 传一个回调函数
        let Mytime = null ;
        return function( ){ 
            clearTimeout( Mytime ) ; // 清除定时器
            Mytime  = setTimeout( () => {
                 fn.apply(this,arguments)
             }, 200)
        }
    }

    image.gif

    1.5 具体使用

    function sayHi() {
          console.log('防抖成功');
        }
    var select = document.getElementById('myselect');
    select .addEventListener('change', debounce(sayHi)); // 防抖

    image.gif

    二、节流函数

    2.1 概念:

      高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率;

    2.2 使用场景:

      就像我接了一个任务,只能在5秒完成任务给回复,在执行后的这5秒内,你再怎么给

      我布置任务我都不管直接当没听到,直到到5秒后执行完这个任务,你才可以再次给

      我布置任务,以此类推。。。

    2.3 实现思路:

      每次触发事件时都判断当前是否有等待执行的延时函数,如果有直接截断事件不用往下执行了;

    2.4 具体实现:

    function throttle( fn ){
        let canUse = true ; // 设置一个开关
        return function(){
            if(!canUse ){ return false } // 如果开关已经关掉了就不用往下了
            canUse  = false  // 利用闭包刚进来的时候关闭开关
            setTimeout( ( ) => { 
                    fn.apply(this,arguments)
              canUse = true // 执行完才打开开关
                },500)
        }
    }

    image.gif

    2.5 具体使用:

    function sayHi(e) {
          console.log(e.target.innerWidth, e.target.innerHeight);
        }
        window.addEventListener('resize', throttle(sayHi));

    image.gif

    三、个人理解两者的区别

    防抖函数和节流函数的一个区别就是防抖是按照最后一次触发为下一次事件执行的时间计算点,

    前面的没满足间隔时间的都从最后这一次开始来决定什么时候执行延时事件;

    而节流函数是按照第一次触发事件作为时间计算点,后面没到间隔时间的事件都忽略;

    相关文章
    |
    3天前
    |
    JavaScript 前端开发
    JavaScript 闭包:让你更深入了解函数和作用域
    JavaScript 闭包:让你更深入了解函数和作用域
    |
    2天前
    |
    JavaScript 前端开发 网络架构
    函数柯里化:JavaScript中的高级技巧
    函数柯里化:JavaScript中的高级技巧
    |
    3天前
    |
    JavaScript 前端开发
    JavaScript的`apply`方法:函数的“应用”与“调用”
    JavaScript的`apply`方法:函数的“应用”与“调用”
    |
    3天前
    |
    JavaScript 前端开发
    JavaScript的`bind`方法:函数的“复制”与“定制”
    JavaScript的`bind`方法:函数的“复制”与“定制”
    |
    3天前
    |
    JavaScript 前端开发
    JavaScript的`call`方法:实现函数间的调用!
    JavaScript的`call`方法:实现函数间的调用!
    |
    4天前
    |
    JavaScript 前端开发
    在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
    【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
    18 2
    |
    4天前
    |
    前端开发 JavaScript 数据处理
    在JavaScript中,异步函数是指什么
    【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
    12 0
    |
    4天前
    |
    JavaScript
    JS中防抖和节流的区别是什么
    JS中防抖和节流的区别是什么
    24 0
    |
    4天前
    |
    JavaScript 前端开发 UED
    【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
    【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
    |
    4天前
    |
    JavaScript 前端开发 UED
    js的防抖节流
    js的防抖节流
    11 1