闭包的实际运用防抖
防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，
如果设定的时间到来之前，又一次触发了事件，就重新开始 延时。
(如果在一段时间内，又触发了该事件；就重新开始 延时)
主要运用
1==>在用户输入,进行搜索时可以使用防抖
2==>射击游戏中的mousedown、keydown事件
3==>搜索，结束后n秒后才进行搜索；n秒内，又输入就重新计时
3==>echarts的resize函数的底层就有防抖
节流：在规定时间内，保证执行一次该函数。
将函数调用赋值给变量；
此时函数已经执行了一次哈
你认为test函数有没有被执行 <script> function test() { console.log('我是被执行了一次的'); } let aa = test(); </script> 已经执行了 //将函数调用赋值给变量；此时函数已经执行了一次哈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="input"> <script> function debounce(func, delay) { console.log(1) let timer; return function (args) { clearInterval(timer); timer = setTimeout(function () { // 在delay秒内执行某一个func事件; func(args) }, delay) } } function inputFunction(val) { console.log(`你输出的结束是${val}`); } //此时的防抖函数已经被执行过一次了；在赋值的过程中； const debouceInput = debounce(inputFunction, 500); const input = document.getElementById("input"); input.addEventListener('keyup', function (e) { debouceInput(e.target.value) }) </script> </body> </html>
我的第二个防抖函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" > <input type="submit" id="input" value="按钮"> <script> const btn = document.getElementById("input"); btn.addEventListener('click', debounce(submit,2000),false) function submit(){ console.log('点击了') } function debounce(func,timer) { var t=null; return function(){ var fristTimer=!t; if(t){ clearTimeout(t) } if(fristTimer){ func.apply(this,arguments) } t=setTimeout(()=>{ t=null; },timer) } } </script> </body> </html>
这两个防抖函数的说明
第一个防抖函数的缺点是第一次进入该函数。
就会被执行
显然这样是不好的
所以我写了第二个防抖函数。就不会已进入就会被执行了
在vue3中防抖函数的使用
在src下创建utils.js文件
代码如下
export function debounce(func,timer) { var t=null; return function(){ var fristTimer=!t; if(t){ clearTimeout(t) } if(fristTimer){ func.apply(this,arguments) } t=setTimeout(()=>{ t=null; },timer) } }
在某一个文件中使用
<template> <div> <button @click="handerClick">按钮</button> </div> </template> <script> import { debounce } from "@/utils.js" export default { setup () { const handerClick=debounce(()=>{ // 你需要做的业务逻辑 console.log('防抖在2s内触发'); },2000) return { handerClick } } } </script>
节流：
当持续触发事件的时候，
保证在一段时间内，只调用一次事件处理函数；
点击王者荣耀回城的时候，就需要使用节流哈~
典型就是：
鼠标不断点击触发；规定在n秒内多次点击只有一次生效
节流函数在vue3中的使用
utils.js文件下的内容 // 节流函数的使用 export function throttle(func, delay) { var begin = 0; return function () { var cur = new Date().getTime(); if (cur-begin>delay) { func.apply(this, arguments) begin=cur } } } vue3 需要的页面使用 <template> <div> <button @click="handerClick3">节流函数的使用</button> </div> </template> <script> import { throttle } from "@/utils.js" export default { setup () { const handerClick3=throttle(()=>{ // 你需要做的业务逻辑 console.log('防抖在2s内触发kkkkkkkkk'); },3000) return { handerClick3, } } } </script>
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)