什么是JavaScript的防抖与节流

目录

• 一、函数防抖（debounce）
• 1. 什么是防抖？
• 二、函数节流
• 2.1 定时器实现
• 2.2 时间戳实现
• 2.3 时间戳+定时器

一、函数防抖（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的防抖与节流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！