防抖
<!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'
}
闭包函数的实际用途还有很多,在这里我就只了解到这些,如果大家还知道哪些,可以补充到评论区。