闭包的经典应用

不会斗地主的猪猪

已于 2023-11-24 13:09:20 修改

阅读量898

点赞数 2

分类专栏：前端三件套文章标签： javascript

于 2022-03-18 17:13:09 首次发布

本文链接：https://blog.csdn.net/m0_56825253/article/details/123578660

版权

前端三件套专栏收录该内容

4 篇文章 0 订阅

订阅专栏

防抖

<!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>
    <input type="text" id="input">
    <script>
        var input = document.querySelector('#input')
        input.addEventListener('keyup',(e)=>{
            console.log(e.target.value);
        })
    </script>
</body>
</html>

上面这个代码，在每一次输入框接收键盘按下事件后，都会立即输出该值，为了解决这个问题，我们想要达到的效果是一秒之内没有再次接收键盘事件，再输出input框中的内容

<!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>
    <div>
        我需要的是，首先，输入框的结果只出现一次，是在我键盘抬起不在输入后的1s之后
    </div>
    <input type="text" id="input">
    <script>
        var input = document.querySelector('#input')
        // 防抖函数
        function debounce(delay){
            var timer
            return b(value){
                clearTimeout(timer)
                timer = setTimeout(function(){
                    console.log(value)
                },delay)
            } 
        }
        var res = debounce(1000)
        input.addEventListener('keyup',(e)=>{
            res(e.target.value)
        })
    </script>
</body>
</html>

这里就是利用闭包的特性，将b函数放到外面，访问内部的timer变量

节流

为了让一段时间内只完成一件事,在这件事进行开始之后，再次点击并没有反应，直到该事件处理完成

<!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 id="button">点击</button>
    <script>
        
        function thro(func, wait){
            var timerOut
            return function(){
                if(!timerOut){
                    timerOut = setTimeout(function(){
                        func()
                        timerOut = null
                    })
                }
            }
        }
        var hanlder = function(){
            console.log(Math.random())
        }
        document.querySelector('#button').onclick = thro(handler, 3000)
        
    </script>
</body>
</html>

单利设计模式

// createLogin函数的作用就是向body中添加一个div，并且返回该div，方便后面使用
var createLogin = function(){
    var div = document.createElement('div')
    div.style.display = 'none'
    div.innerHTML = '我是登录的弹窗2 by myself'
    document.body.appendChild(div)
    return div
}

var getSingle = function(fn){
    var result
    return function(){
        return result || (result = fn.apply(this, arguments))
    }
}

// 将内部函数放到外面中来
var create = getSingle(createLogin)

document.querySelector('#loginBtn').onclick = function(){
    var add = create()
    add.style.display = 'block'
}

闭包函数的实际用途还有很多，在这里我就只了解到这些，如果大家还知道哪些，可以补充到评论区。