函数防抖和函数节流

xiaoxiao无脸男

已于 2022-11-16 11:28:04 修改

阅读量131

点赞数

分类专栏： js 文章标签： javascript vue.js 前端

于 2019-09-18 18:43:00 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/100993138

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>



<body>

<button id="btn">我是按钮</button>



<script src="./jquery.js"></script>

<script>



//防抖

const debounce = function (func, wait) {

let timer = null;

return () => {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(func, wait);

}

}



$('#btn').on('click', debounce(function () {

console.log('第一次点击我后，如果在2s内你又点击了我，那么我会重新计算此函数延迟的时间')

}, 2000))

</script>

</body>



</html>

//节流

const throttle = function (func, delay) {

let flag = true;

return function () {

if (!flag) {

return false;

}

flag = false;

setTimeout(function () {

func();

flag = true;

}, delay)

}

}



$('#btn').on('click', throttle(function () {

console.log('我是每隔2s就会打印出来')

}, 2000))

防抖：触发事件后，在n秒内只执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延迟的时间。使用setTimeout来实现

使用场景：

1.resize和scroll事件

2.加载更多

3.鼠标的mousedown和mousemove事件

4.搜索框的搜索输入，需用户在输完后，才进行ajax查询。

节流：在短时间内频繁触发某一事件，该函数执行一次后，该函数在指定的时间内失效，直到过了这段时间，该函数才会重新生效。通过设置flag来实现。

使用场景：希望定时执行函数，比如在验证用户输入文本或者ajax时，需求是每隔2s就验证或者发送ajax。