防抖与节流函数（原生js编写原理）

最新推荐文章于 2024-08-21 22:17:11 发布

前端挖掘机

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量85

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52770885/article/details/130781916

版权

防抖节流函数

基础知识以及lodah库使用请点击 (7条消息) lodash中防抖和节流的应用_weixin_52770885的博客-CSDN博客

节流函数：利用闭包知识，将timer存储在内存中，在一段时间内只会执行一次定时器中的代码

<body>
    <button>按钮</button>
    
    <script>
    //获取节点 
    var btn = document.querySelector('button')
        //绑定事件 
    btn.addEventListener('click', function(e) {
        //调用节流函数 
        throttleRun()
    })
    var throttleRun = throttle(fn, 1000)
        //定义节流函数
    function throttle(callback, delay) { //callback是回调函数，delay为时间
        let timer
            //由于每次调用throttle函数,timer都会重新声明（那么timer的值一直未undefined）,所以要将timer存储在内存中，则可以利用闭包知识，返回一个函数
        return function() {
            if (!timer) {
                //设置定时器
                timer = setTimeout(function() {
                    //执行回调函数
                    callback()
                        //保证每次执行完仍可以执行下一次操作，将timer重新赋值为空
                    timer = null
                }, delay)
            }
        }
    }

    //定义回调函数
    function fn(e) {
        //里面可以写一些业务逻辑
        console.log(Math.random()); //打印一个随机数
    }
</script>
</body>

场景说明：

防抖函数：利用闭包知识，将timer存储在内存中，不断触发则会一直清除定时器，则最后一次触发一段时间后则会执行定时器中的代码

<body>
    <input type="text" name="" id="">

    <script>
        //获取节点
        var input = document.querySelector('input')

        //绑定事件
        input.addEventListener('keyup', function(e) { //传入event
            //调用函数
            debounceRun(e.target.value)
        })
        var debounceRun = debounce(fn, 1000)
            //定义防抖函数
        function debounce(callback, delay) {
            //声明一个timer，初始值为undefined
            let timer;
            //由于每次执行debounce函数时都会重新定义timer（timer的初始值永远是undefined）,
            //所以要将timer存储在内存中，运用到闭包知识，返回一个函数
            return function(value) { //接收e.target.value
                //清空原来的定时器
                clearTimeout(timer);
                //设置定时器
                timer = setTimeout(function() {
                    fn(value)
                }, delay)
            }
        }
        //定义回调函数
        function fn(value) {
            console.log(value);
        }
    </script>

</body>

场景说明: