防抖和节流

最新推荐文章于 2024-10-30 19:10:39 发布

ChenNianA

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量188

点赞数

文章标签： js javascript 前端

本文链接：https://blog.csdn.net/ChenNianA/article/details/118812543

版权

防抖和节流

一、防抖

注：clearTimeout(timer)会保留一个计时器，此时的timer不是null，以timer为判断条件是true
建议 
clearTimeout(timer);
timer=null;
同时使用

防抖分为两种
1.立即防抖：直接调用函数之后一定时间内连续触发事件不会调用函数，只执行第一次
2.非立即防抖：一定时间没有连续触发事件才调用函数，只执行最后一次

1.立即防抖

<!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>
</head>

<body>
    <button>立即防抖</button>
</body>

<script>
    //调用的函数传入的参数
    const content="点击就送999屠龙刀"

    //触发的事件
    document.querySelector('button').onclick = debounce(log, 1000)

    //调用的函数
    function log(content) {
        console.log(content);
    }
    //防抖函数
    function debounce(fn, delay) {
        let timer;
        return function () {
            //一开始没有计时器，直接执行第一次的调用
            if (!timer) {
            	//[content]，传入fn的参数，用数组形式传参
                fn.apply(this,[content]);
            }
            //清除以前定时器
            clearTimeout(timer)
            timer=null;
            //重新开启定时器，重新计时
            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null;
            }, delay)
        }
    }
</script>

</html>

2.非立即防抖

<body>
    <button>非立即防抖</button>
</body>

<script>
    const content="点击就送999屠龙刀"
    document.querySelector('button').onclick = debounce(log, 1000)
    function log() {
        console.log(content);
    }
    function debounce(fn, delay) {
        let timer;
        return function () {
            //如果存在计时器就清除计时器
            if (timer) {
                clearTimeout(timer);
                timer=null;
            }
            //重新启用定时器，定时器回调函数里执行调用的函数
            timer = setTimeout(() => {
                fn.apply(this,[content])
            }, delay)
        }
    }
</script>

</html>

二、节流

节流：规定时间内只能执行一次调用函数

<body>
    <button>节流</button>
</body>

<script>
    const content="点击就送999屠龙刀"
    document.querySelector('button').onclick = throttle(log, 1000)

    function log(content) {
        console.log(content);
    }

    function throttle(fn, delay) {
        let timer;
        return function () {
            //没有计时器就调用函数
            if (!timer) {
                fn.apply(this,[content]);
                //定时器的回调会清除定时器
                timer=setTimeout(()=>{
                    clearTimeout(timer)
                    timer=null;
                },delay)
            }
        }
    }
</script>

</html>