JavaScript --- 防抖与节流

引言:不管是面试中还是实际应用,防抖与节流都是我们比不可少的一门技能

防抖例如?

  • 假如不操作电脑十分钟后,会触发熄屏函数,然后电脑会熄屏,但是我们如果在十分钟内操作了电脑,将会重新计时十分钟
  • 假如轮播图每过五秒会自动翻页,但是当我们手动点击翻页时,会重新计时五秒,防止突然跳两页的奇怪情况发生

节流例如?

  • 许多网站当页面滚动到一定距离,会出现回到顶部的按钮,节流可以帮助我们减少触发滚动事件的次数
  • 提交按钮的时候,仍有部分人喜欢狂点按钮,节流可以让其不管点击多少次,在一定时间内只能生效一次

防抖的经典实现

防抖函数常用于DOM事件中

function debounce(fn, delay) {
      //1. 点击触发的函数是debouce函数的返回值
    let timeout = null
    return function() {
      //2. 也就是这个函数
        clearTimeout(timeout)
        timeout = setTimeout(() => {
      //再次触发就重新计时
            fn()
        }, delay)
    }
}
//测试
function fn() {
     
    console.log('静止了1s')
}
window.onmousemove = debounce(fn, 1000)

鼠标静止1s后触发函数:
JavaScript --- 防抖与节流_第1张图片

节流的经典实现

function throttle(fn, delay) {
     
    let canRun = true
    return function() {
     
        if (!canRun) return
        
        canRun = false
        setTimeout(() => {
     
            fn()
            canRun = true
        }, delay)
    }
}
//测试
function fn() {
     
    console.log('移动中...')
}
window.onmousemove = throttle(fn, 1000)

不管如何移动,函数最多每秒触发一次:
JavaScript --- 防抖与节流_第2张图片

无定时器的节流

节流的核心在于如果两次触发的时间差小于规定的时间,则让第二次触发作废

所以节流有第二种实现方式:

function throttle2(fn, delay) {
      
    let time = null
    return function() {
     
        if (!null || +new Date() - time > delay) {
     
            fn()
            time = +new Date()
        }
    }
}

两种节流效果相当,不过在少数的情况下有区别

  • 两者确定时间的精度不一样
  • new Date()依赖与本地时间,而定时器依赖于js引擎

引入this

无论何时何地,javascript的this指向永远都是一个头疼的问题,一切的根源都来自于函数可以作为参数,在防抖与节流中,也需要注意这个问题

以节流函数为例子:

function throttle(fn, delay) {
     
    let canRun = true
    return function() {
     
        if (!canRun) return
        canRun = false
        setTimeout(() => {
     
            fn()
            canRun = true
        }, delay)
    }
}
let a = {
     
    name: 'lihua',
    sayName() {
     
        console.log(this.name)
    }
}
setInterval(throttle(a.sayName, 2000), 100)

/* 每隔2s输出一个undefined
  undefined
  undefined
  ......
*/

原因是调用该函数的是全局global对象,在浏览器中是window

为此,我们必须得传入期望调用该函数的对象:

function throttle(fn, delay) {
     
    let canRun = true
    return function(...args) {
     
        if (!canRun) return
        canRun = false
        setTimeout(() => {
     
            fn.apply(args[0])  //让a对象调用此函数
            canRun = true
        }, delay)
    }
}
let a = {
     
    name: 'lihua',
    sayName() {
     
        console.log(this.name)
    }
}
setInterval(throttle(a.sayName, 2000), 100, a) //传入a对象  注:定时器的第三个及其之后的参数会作为回调函数的参数 
/* 每隔2s输出一个lihua
  lihua
  lihua
  ......
*/

错误的实现!

在实际应用中,有部分人并没有理解防抖与节流函数的用法,例如如下的做法是错误的

function throttle(fn, delay) {
     
    let canRun = true
    return function() {
     
        if (!canRun) return
        canRun = false
        setTimeout(() => {
     
            fn()
            canRun = true
        }, delay)
    }
}

function output() {
     
    console.log(123)
}
setInterval(() => {
     
    throttle(output, 2000)  //需要执行的函数是throttle的返回函数,而不是throttle本身
}, 1000)

你可能感兴趣的:(JavaScript)