js函数中防抖和节流

最新推荐文章于 2024-10-02 05:39:15 发布

爱敲代码的小趴菜

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量633

点赞数 2

文章标签： javascript 函数闭包

本文链接：https://blog.csdn.net/SUperstarkd/article/details/121521914

版权

记录一下学习闭包应用之防抖和节流

如何产生闭包：
当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，就产生了闭包

function a () {
 var aa = 1111
 function b () {
   var bb = 222
   console.log(aa)
   function c () {
       console.log(bb)
   }
   c()
 }
 b()
}
a()

什么是闭包：
闭包是嵌套的内部函数
注意：闭包存在于嵌套的内部函数中
闭包的次数：嵌套函数执行几次就产生了几个闭包
在这里插入图片描述

防抖：持续触发的事件，一定时间内没有再次触发事件，事件处理函数才会处理一次，如果在设定时间到来之前再次触发了事件，就重新开始延迟

节流：持续触发事件的时候，保证在一段时间内只调用一次事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" name="">
    <button>按钮</button>
    <script type="text/javascript">
        /**
            防抖
         */
        function shake (callback,delay) {
            let timer
            return function (value) {
                clearTimeout(timer)
                timer = setTimeout(function () {
                    callback(value)
                }, delay)
            }
        }

        function fn (value) {
            console.log(value)
        }

        let input = document.getElementsByTagName('input')[0]
        let reshape = shake(fn, 800)
        input.addEventListener('input', function(e){
            reshape(e.target.value)
        })


        /**
         * 节流
         */
        function throttle (callback, delay) {
            let timer
            return function () {
                if(!timer) {
                    timer = setTimeout(function () {
                        callback()
                        timer = null
                    }, delay)
                }
            }
        }
        function fun () {
            console.log('我被点击了')
        }
        let button = document.getElementsByTagName('button')[0]
        let test = throttle(fun, 800)
        button.addEventListener('click', function () {
            test()
        })
    </script>
</body>
</html>