什么是JavaScript的防抖与节流

 更新时间:2021年12月29日 09:10:13   作者:前端老实人  
这篇文章主要介绍了什么是JavaScript的防抖与节流,防抖是在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束,节流看下面文章的具体介绍吧

一、函数防抖(debounce)

1. 什么是防抖?

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

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

具体如下面的例子所示:

/*定义防抖函数
 * func:传入一个函数,事件不再持续触发时会调用该函数
 * delay:定义持续多久后执行传入的回调函数
 * */
 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>

/*
 * 定义定时器节流函数
 * func:传入事件处理函数
 * delay:在delay指定的时间内定时器回调无效
 * */
 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的防抖与节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器,图片可以实现滑动、缩放、双击缩放等效果,
    2016-11-11
  • JS中addEventListener的使用示例详解

    JS中addEventListener的使用示例详解

    addEventListener是JavaScript中的一个方法,用于向一个元素添加事件监听器,本文给大家介绍JS中addEventListener的使用示例代码,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • JavaScript对Cookie进行读写操作实例

    JavaScript对Cookie进行读写操作实例

    这篇文章主要介绍了JavaScript对Cookie进行读写操作的方法,实例分析了javascript针对cookie的读写操作技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • javascript实现鼠标点击生成文字特效

    javascript实现鼠标点击生成文字特效

    这篇文章主要为大家详细介绍了javascript实现鼠标点击生成文字特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 如何利用Three.js实现跳一跳小游戏

    如何利用Three.js实现跳一跳小游戏

    最近在公司写H5的3D游戏,选择了ThreeJS去做,做的过程中遇到了很多问题,下面这篇文章主要给大家介绍了关于如何利用Three.js实现跳一跳小游戏的相关资料,需要的朋友可以参考下
    2022-04-04
  • 微信小程序实现tab点击切换

    微信小程序实现tab点击切换

    这篇文章主要为大家详细介绍了微信小程序实现tab点击切换,不滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript实现弹出式可拖动登录框

    JavaScript实现弹出式可拖动登录框

    这篇文章主要为大家详细介绍了JavaScript实现弹出式可拖动登录框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 详解微信小程序动画Animation执行过程

    详解微信小程序动画Animation执行过程

    这篇文章主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • javascript window.confirm确认 取消对话框实现代码小结

    javascript window.confirm确认 取消对话框实现代码小结

    本文章讲述的三种都是基于了javascript confirm提示确认框的做法了,只是在不同的地方写哦,有需要的同学可参考一下
    2012-10-10
  • bootstrap模态框实现拖拽效果

    bootstrap模态框实现拖拽效果

    这篇文章主要为大家详细介绍了bootstrap模态框实现拖拽效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论