概念
函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。
- 防抖：就是一定时间内，只会执行最后一次任务；
- 节流：就是一定时间内，只执行一次 ；
防抖
<button id="debounce">点我防抖！
button> <script> $('#debounce').on('click', debounce()); function debounce() {
let timer; // 使用闭包，多次调用都能访问到同一个变量，而不是生成新的变量 return function () {
clearTimeout(timer); timer = setTimeout(() => {
// 需要防抖的操作... console.log("防抖成功！"); }, 500); } }
script> 
函数防抖的应用场景，最常见的就是页面滚动条监听的例子，来进行解析：
let timer; window.onscroll = function () {
clearTimeout(timer); timer = setTimeout(function () {
//滚动条位置 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); }, 200) } 
防抖函数的封装使用
// 防抖函数 function debounce(fn,delay) {
let timer; return function () {
clearTimeout(timer); timer = setTimeout(() => {
fn.apply(this,arguments); },delay); } } window.onscroll = debounce(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); },200) // jq $(window).on('scroll', debounce(function () {
console.log("防抖成功！"); }, 200)) 节流
<button id="throttle">点我节流！
button> <script> $('#throttle').on('click', throttle()); function throttle(fn) {
let flag = true; // 使用闭包，方法多次调用都能访问到同一个变量，而不是生成新的flag变量 return function () {
if (!flag) {
return; } flag = false; setTimeout(() => {
console.log("节流成功！"); flag = true; }, 1000); }; }
script> 
函数节流应用的实际场景，根据文本框中输入的内容自动请求后台数据。
节流函数的封装使用
<input type="text" value="" id="input"> <script> // 节流函数 function throttle(fn, delay) {
let flag = true; return function () {
if (!flag) {
return; } flag = false; setTimeout(() => {
fn.apply(this, arguments); flag = true; }, delay); } } $('#input').on('keyup', throttle(function () {
console.log($(this).val()); // ajax后台请求.... }, 1000));
script> 
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211143.html原文链接：https://javaforall.net
