JavaScript中的防抖和节流

前言导入

在一个网页里, 通常会有很多的监听事件

就比如说监听用户的点击, 输入框的键入, 或是监听鼠标指针的移动等

这些事件都有一个共同点, 就是可以做到高速的触发

当事件在短时间内被多次触发

相应的函数也会被多次调用

这样的话就会严重影响网页的性能

所以我们就得想办法制止这类事情的发生

防抖和节流应运而生

初步认识防抖和节流

让我们先来看看它们的定义

防抖（Debounce）指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

节流（Throttle）指的是在指定的一段时间内只能触发一次函数的执行, 如果多次触发则视为一次

而我们需要学习的, 就是如何优雅地实现防抖和节流

防抖

防抖的核心就是:

在事件触发调用函数后计时器开始计时

如果在计时的范围内, 事件再次被触发

则让计时器重新计时, 在计时完成后执行函数


// 我们需要传入一个函数和防抖的范围时间

// 然后传回一个防抖函数

function debunce(fn, time) {
    var timer = null
    return function() {
        if (timer) {
            clearTimeout(timer) // 当timer已经被赋值为定时器后
        }                       // 重新开始计时
        timer = setTimeout(fn, time)
    }
}

function print() {
    console.log('HelloWorld')
}

windows.addEventListener('mousemove', debunce(print, 1000))  // 监听

// 当我们鼠标移动时, 不会一直输出HelloWorld, 而是在鼠标停下后1s输出

节流

节流, 就像它的名字一样. 当我们需要水, 我们会打开水龙头, 如果阀门被拧

的很松, 此时水倾泻而出, 很有可能会浪费许多的资源, 所以我们可以拧到恰

好的位置来控制它的流量, 让它慢慢地, 有节奏地一滴一滴流出来

所以js中的节流就是, 一段时间内函数只可以被触发一次, 让它顺着我们

的节奏, 一次一次地被触发

JavaScript中节流的核心就是:

判断距离上一次触发, 有没有大于我们设定的间隔时间


// 时间戳法

function throttle(fn, time) {
    var prev = Date.now()
    return function() {
        if (Date.now() - prev >= time) {
            fn().apply(this, arguments)
            prev = Date.now()
        }
    }
}

function print() {
    console.log("HelloWorld")
}

window.addEventListner('mousemove', throttle(print, 1000))

这样我们就借助时间戳来完成了节流的工作

防抖与节流的区别

通过刚才的两个例子我们可以清楚的了解到

防抖是在给定的时间范围内等待事件是否再次被触发

如果再次被触发就重新计时, 只有在给定范围内不再触发事件

函数才可以被执行

而节流是, 伴随事件的发生先执行一次事件监听的函数, 如果在

所规定的时间范围内事件再次被发生, 函数不会被执行

只有超过了时间范围, 再此监听到事件的发生函数才会被调用

总结

高频率地触发同一个事件会占用我们大量的内存空间

作为开发者我们肯定不想这样的事情发生

因为这样不仅降低了用户的体验, 而且还会为服务器造成较大的负荷

所以防抖和节流是每一个前端程序员的必修课

我们可以借助setTimeout函数和now函数作为桥梁

连接函数与时间

以此来帮助我们控制事件被触发的时机

ᕙ(`▿´)ᕗ

2023/5/20

在这个特殊的节日里分享一串nice的代码

import time
sentence = "Darling, I love you forever!"
for char in sentence.split():
   allChar = []
   for y in range(12, -12, -1):
       lst = []
       lst_con = ''
       for x in range(-30, 30):
            formula = ((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3
            if formula <= 0:
                lst_con += char[(x) % len(char)]
            else:
                lst_con += ' '
       lst.append(lst_con)
       allChar += lst
   print('\n'.join(allChar))
   time.sleep(1)

祝所有有情人终成眷属!!! (包括我嘿嘿)

JS中的防抖和节流

JavaScript中的防抖和节流

前言导入

初步认识防抖和节流

防抖

节流

防抖与节流的区别

总结