iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >什么是JavaScript的防抖与节流
  • 748
分享到

什么是JavaScript的防抖与节流

2024-04-02 19:04:59 748人浏览 独家记忆
摘要

目录一、函数防抖(debounce) 1. 什么是防抖? 二、函数节流 2.1 定时器实现 2.2 时间戳实现 2.3 时间戳+定时器 一、函数防抖(debounce) 1. 什么

一、函数防抖(debounce)

1. 什么是防抖?

函数防抖: 在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束。

规定时间内没有继续触发事件的前提下,再去调用事件处理函数;

具体如下面的例子所示:



 function debounce(func,delay) {
  let timer = null  // 用于保存定时器
  return function (...args) {
   // 如果定时器存在,清除定时器,随后重新设置timer
   if(timer !== null) clearTimeout(timer)
   timer = setTimeout(func, delay)  // 超过delay为接收到事件会调用这里的func   必要的额时候可以修改func的this指向  由于timer对外部存在引用,因此不会被销毁
  }
 }

 
 function testDeBounce(){
  console.log('你看我执行了几次??')
 }

 // 接收debounce返回的函数
 const temp = debounce(testDeBounce(),1000)

 
 window.addEventListener('scroll',()=>{
  temp()
 }); // 这样写最少调用一次事件处理函数,最多也不会多余下面的写法执行的次数
 window.addEventListener('scroll', testDeBounce); // 如果这样写的话,每当页面滚动就会调用事件处理函数

总结一下思路:

  • 1.定义一个节流函数
  • 2.函数内部使用一个变量保存定时器
  • 3.返回一个函数,函数内部定义:如果定时器已经存在就清除定时器,重新设置定时器
  • 4.定义一个变量来接收debounce返回的函数
  • 5.在事件的回调函数中直接调用上一步的变量接收的方法

二、函数节流

函数节流: 在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;

函数节流实现的方式: 定时器、时间戳、定时器+时间戳;

2.1 定时器实现

思路:

  • 1.定义节流函数throttle
  • 2.定义timer保存定时器
  • 3.返回一个函数。函数内部定义:如果定时器不存在,设置定时器,间隔某一时间后将timer设置为null,如果在这之前事件再次触发,则定时器中的回调无效

<button>这是一个孤独的按钮</button>



 function throttle(func,delay) {
  let timer = null
  const context = this
  return function(...args){
   // 如果定时器不存在
   if(!timer){
    timer = setTimeout(()=>{
     func.apply(context,args) // 考虑返回的函数调用的环境,因此这里不直接使用this
     timer = null // delay之后清除定时器
    },delay)
   }
  }
 }

 function test() {
  console.log('啊啊啊!')
 }

 const temp = throttle(test,1000)

 document.querySelector('button').addEventListener('click',()=>{
  temp()
 })

2.2 时间戳实现


var throttle = function(func, delay) {            
  var prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {                    
      func.apply(context, args);                    
      prev = Date.now();                
    }            
  }        
}    

function handle() {            
  console.log(Math.random());        
}        

window.addEventListener('scroll', throttle(handle, 1000));

2.3 时间戳+定时器


// 节流throttle代码(时间戳+定时器):
var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}

function handle() {      
    console.log(Math.random());
} 

window.addEventListener('scroll', throttle(handle, 1000));

到此这篇关于什么是javascript的防抖与节流的文章就介绍到这了,更多相关JavaScript的防抖与节流内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 什么是JavaScript的防抖与节流

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

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

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

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

下载Word文档
猜你喜欢
  • 什么是JavaScript的防抖与节流
    目录一、函数防抖(debounce) 1. 什么是防抖? 二、函数节流 2.1 定时器实现 2.2 时间戳实现 2.3 时间戳+定时器 一、函数防抖(debounce) 1. 什么...
    99+
    2024-04-02
  • javascript的防抖和节流是什么
    这篇文章将为大家详细讲解有关javascript的防抖和节流是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一:为什么需要防抖与节流 防抖和节流都是为了解决短时间内大量触发某函数或者事件而导...
    99+
    2023-06-28
  • JavaScript中防抖与节流指的是什么意思
    这篇文章主要为大家展示了“JavaScript中防抖与节流指的是什么意思”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中防抖与节流指的是什么意思”这篇文章吧。一、函数防抖(d...
    99+
    2023-06-22
  • 浅谈JavaScript节流与防抖
    目录节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖 背景:当我们频繁去请求资源、接...
    99+
    2024-04-02
  • JavaScript 防抖debounce与节流thorttle
    目录一、防抖(Debounce)1.1 防抖函数的实现(1)版本1 —— 停止触发事件n毫秒后执行回调函数(2)版本21.2 防抖的实际应用(1)搜索框建议项...
    99+
    2024-04-02
  • JavaScript防抖与节流详解
    目录防抖debounce节流throttle总结防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。 关于防抖,...
    99+
    2024-04-02
  • JavaScript防抖与节流怎么使用
    这篇文章主要讲解了“JavaScript防抖与节流怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript防抖与节流怎么使用”吧!前言:防抖(Debounce) ...
    99+
    2023-06-30
  • JavaScript防抖动与节流处理
    针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。 因此针对这类事件要进行防抖动或者节流处理 防...
    99+
    2024-04-02
  • JavaScript中节流和防抖的区别是什么
    这期内容当中小编将会给大家带来有关JavaScript中节流和防抖的区别是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。节流概念(Throttle)按照设定的时间固定...
    99+
    2024-04-02
  • JavaScript节流与防抖实例分析
    本篇内容主要讲解“JavaScript节流与防抖实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript节流与防抖实例分析”吧!一、js防抖和节流在进行窗口的resize、sc...
    99+
    2023-06-29
  • JavaScript深入理解节流与防抖
    目录一、js防抖和节流二、为什么滚动scroll、窗口resize等事件需要优化三、滚动和页面渲染前端性能优化的关系四、防抖Debounce1 防抖Debounce情景2 防抖原理3...
    99+
    2024-04-02
  • javascript函数的节流和防抖是什么意思
    本篇内容介绍了“javascript函数的节流和防抖是什么意思”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • JavaScript如何实现防抖与节流
    这篇文章主要介绍了JavaScript如何实现防抖与节流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概念防抖:点击N次提交按钮,只有最后一次会发出请求。减少无效请求的次数。...
    99+
    2023-06-29
  • JavaScript中函数的防抖与节流详解
    目录一、函数的节流1.1 定义1.2 解决方法1.3 案例演示1.3 .1  代码演示1.3 .2  运行结果1.3 .3  添加函数节流操作1.3 ....
    99+
    2024-04-02
  • JavaScript的防抖和节流案例
    目录防抖节流: 防抖:在一定的时间内只执行最后一次任务; 节流:一定的时间内只执行一次; 防抖 <button id="debounce">点我防抖!</bu...
    99+
    2024-04-02
  • JavaScript防抖动与节流如何处理
    今天小编给大家分享一下JavaScript防抖动与节流如何处理的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。针对一些会频繁触...
    99+
    2023-07-02
  • JavaScript 防抖和节流详解
    目录防抖节流总结防抖 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时 当事件被触发时,设定一个延迟,若期间事件又被触发...
    99+
    2024-04-02
  • 关于JavaScript防抖与节流的区别与实现
    目录1、防抖2、节流3、总结 前言: 作为前端开发中会以下两种需求 (1)搜索需求 搜索的逻辑就是监听用户输入事件,等用户输入完成之后把数据发送给后端,后端返回匹配数据,前端显示数...
    99+
    2024-04-02
  • JavaScript防抖与节流的实现与注意事项
    目录概念实现测试注意事项总结概念 防抖:点击N次提交按钮,只有最后一次会发出请求。减少无效请求的次数。 节流:每点击一次按钮,都会失效一段时间。降低触发的频率。 实现 functi...
    99+
    2024-04-02
  • JavaScript中函数的防抖与节流怎么应用
    本文小编为大家详细介绍“JavaScript中函数的防抖与节流怎么应用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中函数的防抖与节流怎么应用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作