关于javascript:防抖和节流

93次阅读

共计 1098 个字符，预计需要花费 3 分钟才能阅读完成。

在 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/

正文完