函数防抖和节流

最新推荐文章于 2024-09-30 15:42:36 发布

Authorization-

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量37

点赞数

文章标签：前端 css css3 html javascript

本文链接：https://blog.csdn.net/m0_57923701/article/details/119846847

版权

在进行窗口的 resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕

此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来减少调用频率，同时又不影响实际效果

函数节流（throttle）

连续触发事件但是在 n 秒中只执行一次函数

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优

良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内

一滴一滴的往下滴

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

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

<title>节流</title>

<style>

div{

position: fixed;

width: 200px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

<div></div>

<script>


let timer = 0

let box = document.querySelector('div')

document.onmousemove = function (e) {

if(timer !== 0) {

return

}

timer = setTimeout(() => {

box.style.left = e.pageX + 'px'

box.style.top = e.pageY + 'px'

console.log(1);

timer = 0

}, 50);



}

</script>

</body>

</html>

函数防抖（debounce）

触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数

才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    <style>
        input {
            display: block;
            width: 350px;
            height: 34px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <input type="text">
    <script>
        let timer = null
        document.querySelector('input').oninput = function() {
            clearTimeout(timer)
            timer = setTimeout(() => {
                console.log(this.value);
            }, 1000);
        }
    </script>
</body>

</html>