iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript的防抖节流函数解析
  • 747
分享到

javascript的防抖节流函数解析

2024-04-02 19:04:59 747人浏览 八月长安
摘要

目录防抖节流函数的解析认识防抖和节流函数认识防抖debounce函数防抖函数的案例认识节流throttle函数节流函数的应用场景自定义防抖和节流函数总结防抖节流函数的解析 认识防抖和

防抖节流函数的解析

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中

  • javascript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理。
  • 而对于某些频繁的事件处理会造成性能的损耗,我们就可以通过防抖和节流来限制事件频繁的发生;

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数,也是面试经常被问到的面试题

但是很多前端开发者面对这两个功能,有点摸不着头脑:

  • 某些开发者根本无法区分防抖和节流有什么区别(面试经常会被问到);
  • 某些开发者可以区分,但是不知道如何应用;
  • 某些开发者会通过一些第三方库来使用,但是不知道内部原理,更不会编写;

认识防抖debounce函数

我们用一副图来理解一下它的过程:

  • 当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间;
  • 当事件密集触发时,函数的触发会被频繁的推迟;
  • 只有等待了一段时间也没有事件触发,才会真正的执行响应函数;

在这里插入图片描述

防抖的应用场景很多:

  • 输入框中频繁的输入内容,搜索或者提交信息;
  • 频繁的点击按钮,触发某个事件;
  • 监听浏览器滚动事件,完成某些特定操作;
  • 用户缩放浏览器的resize事件;

防抖函数的案例

我们都遇到过这样的场景,在某个搜索框中输入自己想要搜索的内容

比如想要搜索一个MacBook:

  • 当我输入m时,为了更好的用户体验,通常会出现对应的联想内容,这些联想内容通常是保存在服务器的,所以需要一次网络请求;
  • 当继续输入ma时,再次发送网络请求;
  • 那么Macbook一共需要发送7次网络请求;
  • 这大大损耗我们整个系统的性能,无论是前端的事件处理,还是对于服务器的压力;

但是我们需要这么多次的网络请求吗?

  • 不需要,正确的做法应该是在合适的情况下再发送网络请求;
  • 比如如果用户快速的输入一个macbook,那么只是发送一次网络请求;
  • 比如如果用户是输入一个m想了一会儿,这个时候m确实应该发送一次网络请求;
  • 也就是我们应该监听用户在某个时间,比如500ms内,没有再次触发时间时,再发送网络请求;

这就是防抖的操作:只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数;

认识节流throttle函数

我们用一副图来理解一下节流的过程

  • 当事件触发时,会执行这个事件的响应函数;
  • 如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数;
  • 不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的;

在这里插入图片描述

节流的应用场景:

  • 监听页面的滚动事件;
  • 鼠标移动事件;
  • 用户频繁点击按钮操作;
  • 游戏中的一些设计;

节流函数的应用场景

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中,我们按下空格会发射一个子弹:

  • 很多飞机大战的游戏中会有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射;
  • 比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射;
  • 但是事件是触发了10次的,响应的函数只触发了一次;

在这里插入图片描述

自定义防抖和节流函数

我们按照如下思路来实现:

防抖基本功能实现:可以实现防抖效果

  • 优化一:优化参数和this指向
  • 优化二:优化取消操作(增加取消功能)
  • 优化三:优化立即执行效果(第一次立即执行)
  • 优化四:优化返回值
function debounce(fn,delay,immediate=false,resultCallback){
  let timer=null
  // console.log(this)//window
  // 定义控制立即执行的变量,false表示没有执行过
  let isInvoke=false
  // 真正的处理函数
  function _debounce(...args){
    // 取消事件执行操作
    if(timer) clearTimeout(timer)
    // console.log(this)//element元素
    if(immediate&&!isInvoke){
      const result=fn.apply(this,args)
      resultCallback(result)
      isInvoke=true
    }else{
      // 延迟执行
      timer=setTimeout(()=>{
        const result=fn.apply(this,args)
        resultCallback(result)
        timer=null
        isInvoke=false
      },delay)
    }
  }
  // 封装取消请求
  _debounce.cancel=function(){
    if(timer) clearTimeout(timer)
    timer=null
    isInvoke=false
  }
  return _debounce
}

我们按照如下思路来实现:

节流函数的基本实现:可以实现节流效果

  • 优化一:节流最后一次也可以执行
  • 优化二:优化添加取消功能
  • 优化三:优化返回值问题
function throttle(fn,interval,options={leading:true,trailing:false}){
  let lastTime=0
  const {leading,trailing,resultCallback}=options
  let timer=null
  function _throttle(...args){
    const nowTime=new Date().getTime()
    // leading优化
    if(!leading&&!lastTime) lastTime=nowTime
    let remainTime=interval-(nowTime-lastTime)
    if(remainTime<=0){
      if(timer){
        clearTimeout(timer)
        timer=null
      }
      // 参数优化
      const result=fn.apply(this,args)
      if(resultCallback) resultCallback(result)
      lastTime=nowTime
      return
    } 
    // 优化trailing
    if(!timer&&trailing){
      timer=setTimeout(()=>{
        // 参数优化
        const result=fn.apply(this,args)
        if(resultCallback) resultCallback(result)
        timer=null
        lastTime=!leading?0:new Date().getTime()
      },remainTime)
    }
  }
  _throttle.cancel=function(){
    if(timer) clearTimeout(timer)
    timer = null
    lastTime = 0
  }
  return _throttle
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容! 

--结束END--

本文标题: javascript的防抖节流函数解析

本文链接: https://www.lsjlt.com/news/162551.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript的防抖节流函数解析
    目录防抖节流函数的解析认识防抖和节流函数认识防抖debounce函数防抖函数的案例认识节流throttle函数节流函数的应用场景自定义防抖和节流函数总结防抖节流函数的解析 认识防抖和...
    99+
    2024-04-02
  • 如何进行javascript的防抖节流函数解析
    这期内容当中小编将会给大家带来有关如何进行javascript的防抖节流函数解析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。防抖节流函数的解析认识防抖和节流函数防抖和节流的概念其实最早并不是出现在软件工...
    99+
    2023-06-26
  • JavaScript中函数的防抖与节流详解
    目录一、函数的节流1.1 定义1.2 解决方法1.3 案例演示1.3 .1  代码演示1.3 .2  运行结果1.3 .3  添加函数节流操作1.3 ....
    99+
    2024-04-02
  • JavaScript防抖与节流详解
    目录防抖debounce节流throttle总结防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。 关于防抖,...
    99+
    2024-04-02
  • JavaScript 防抖和节流详解
    目录防抖节流总结防抖 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时 当事件被触发时,设定一个延迟,若期间事件又被触发...
    99+
    2024-04-02
  • JS函数防抖和函数节流的示例分析
    这篇文章主要介绍JS函数防抖和函数节流的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!概述函数防抖和函数节流都是定义一个函数,该函数接收一个函数作为参数,并返回一个添加了防抖或节流功能后的函数。因此可以将函数...
    99+
    2023-06-15
  • 如何分析JS函数的防抖和节流
    如何分析JS函数的防抖和节流,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。节流实质上是:如果你持续触发事件,每隔一段时间,只执行一次事件。根据这个需求我们可以通...
    99+
    2023-06-03
  • JavaScript函数防抖与函数节流的定义及使用详解
    目录一、函数防抖(Debouncing)1、基本概念2、算法思想3、代码实现4、使用场景二、函数节流(Throlle)1、基本概念2、算法思想3、代码实现4、使用场景一、函数防抖(D...
    99+
    2022-11-13
    JavaScript函数防抖 JavaScript函数节流 JavaScript 函数防抖 节流
  • JavaScript节流与防抖实例分析
    本篇内容主要讲解“JavaScript节流与防抖实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript节流与防抖实例分析”吧!一、js防抖和节流在进行窗口的resize、sc...
    99+
    2023-06-29
  • 解读函数的节流与防抖问题
    目录函数的节流与防抖1、节流2、防抖函数防抖和函数节流及其使用场景1、为什么会使用到函数防抖和函数节流2、什么是函数防抖和函数节流总结函数的节流与防抖 1、节流 节流的意思是,规定时...
    99+
    2022-12-09
    函数的节流 函数的防抖 函数节流与防抖
  • javascript函数的节流和防抖是什么意思
    本篇内容介绍了“javascript函数的节流和防抖是什么意思”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • JavaScript中函数的防抖与节流怎么应用
    本文小编为大家详细介绍“JavaScript中函数的防抖与节流怎么应用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中函数的防抖与节流怎么应用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-06-29
  • JavaScript防抖和节流函数代码怎么写
    这篇“JavaScript防抖和节流函数代码怎么写”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript防抖和节...
    99+
    2023-07-05
  • 如何理解JS函数防抖和函数节流
    目录概述1. 函数防抖(debounce)2. 函数节流(throttle)概述 函数防抖和函数节流都是定义一个函数,该函数接收一个函数作为参数,并返回一个添加了防抖或节流功能后的函...
    99+
    2024-04-02
  • javascript的防抖和节流你了解吗
    一:为什么需要防抖与节流  防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题,比如在 1.用户体验上,触发频率过高导致的响应速度跟不上触发频率,出现延迟...
    99+
    2024-04-02
  • js中函数节流与防抖的示例分析
    小编给大家分享一下js中函数节流与防抖的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!js 的节流与防抖函数防抖&nbs...
    99+
    2024-04-02
  • JavaScript的防抖和节流案例
    目录防抖节流: 防抖:在一定的时间内只执行最后一次任务; 节流:一定的时间内只执行一次; 防抖 <button id="debounce">点我防抖!</bu...
    99+
    2024-04-02
  • 浅谈JavaScript节流与防抖
    目录节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖 背景:当我们频繁去请求资源、接...
    99+
    2024-04-02
  • JavaScript深入理解节流与防抖
    目录一、js防抖和节流二、为什么滚动scroll、窗口resize等事件需要优化三、滚动和页面渲染前端性能优化的关系四、防抖Debounce1 防抖Debounce情景2 防抖原理3...
    99+
    2024-04-02
  • JavaScript 防抖debounce与节流thorttle
    目录一、防抖(Debounce)1.1 防抖函数的实现(1)版本1 —— 停止触发事件n毫秒后执行回调函数(2)版本21.2 防抖的实际应用(1)搜索框建议项...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作