乐趣区

关于javascript:防抖和节流

简介

在 JavaScript 中,防抖(debounce)和节流(throttle)是用来限度函数执行频率的两种常见技术。

防抖(debounce)是指在某个时间段内,只执行最初一次触发的函数调用。如果在这个时间段内再次触发该函数,会从新计时,直到等待时间完结才会执行函数。
这个技术通常用于解决频繁触发的事件,比方窗口大小调整、搜寻框输出等。防抖能够防止函数执行过屡次,以缩小网络开销和性能累赘。

节流(throttle)是指在一段时间内限度函数的执行频率,保障肯定工夫内只执行一次函数调用。无论触发频率多高,都会在指定工夫距离内执行一次函数。
这个技术通常用于解决间断触发的事件,比方滚动事件、鼠标挪动事件等。节流能够管制函数的执行频率,以缩小资源耗费和进步性能。

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wi![防抖.gif](/img/bVdbzZB)dth=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn"> 防抖 </button>
</body>
// 引入 lodash 文件
<script src="/node_modules/lodash/lodash.js"></script>
<script>
    btn.onclick =  _.debounce(function() {console.log('防抖在某段时间内只执行最初一次');
    },1000)
</script>
</html>

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn"> 节流 </button>
</body>
// 引入 lodash 文件
<script src="/node_modules/lodash/lodash.js"></script>
<script>
    btn.onclick =  _.throttle(function() {console.log('节流是指在一段时间内限触发的次数');
    },1000)
</script>
</html>

lodash 网址:https://www.lodashjs.com/

退出移动版