js实现防抖和节流

最新推荐文章于 2024-08-04 16:33:59 发布

A_娃娃菜

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量447

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73164254/article/details/127989949

版权

防抖：防抖就是在连续多次触发该事件，事件触发间隔小于设定的事件，事件只会执行最后一次

节流：规定的时间内，只能触发一次该事件

------------------------------

接下来看代码：

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

<body>
    <button id="btn1">防抖</button>
    <button id="btn2">节流</button>


</body>
<script>
    let num = 0;
    function add() {
        num++
        console.log(num);
    }
    // 防抖就是多次连续点击只触发一次事件
    function debounce(callback, time) {
        // 缓存一个计时器
        let timer = null;
        return function () {
            // 如果timer存在就清除计时器
            if (timer) clearTimeout(timer)
            //设置新的计时器
            timer = setTimeout(() => {
                callback()
            }, time)

        }
    }
    let func = debounce(add, 500)
    btn1.onclick = () => {
        func()
    }
    // 节流就是持续触发事件时,每隔一段事件才执行一次事件
    function jiliu(callback, time) {
        // 同样先缓存一个变量来存储计时器
        let timer = null;
        return function (val) {
            // 返回的函数才是正儿八经实现效果的
            if (!timer) {
                timer = setTimeout(() => {
                    callback(val);
                    timer = null;
                }, time)
            }
        }
    }
    function handle(val) {
        console.log(val);
    }
    let ffunc = jiliu(handle, 1000)
    // btn2.onclick = () => {
    //     ffunc('节流')
    // }
    // 方法2时间戳实现
    function jl(callback, times) {
        // 获取当前时间戳
        let time = Date.now()
        // console.log(times);
        return function (val) {

            let btntime = Date.now();
            // console.log(val, btntime);
            if (btntime - time >= times) {
                callback(val);
                time = Date.now();
            }
        }
    }
    let jll = jl(handle, 2000)
    // console.log(jll);
    btn2.onclick = () => {
        jll('节流执行')
    }
</script>

</html>