关于闭包 vue3 防抖 节流
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于闭包 vue3 防抖 节流相关的知识，希望对你有一定的参考价值。
参考技术A 闭包好像成了面试题必考，干脆就学一下。我暂时理解的闭包：一个函数中嵌套着另一个函数，这个函数就是闭包。闭包不会内存泄露，也不会被清除。所以不能滥用，滥用会导致内存过大。
//开始学习：
基础的概念：JS的执行上下文。就是JS是有作用域的，一个全局作用域，一个是函数里面的块级作用域。
日常使用闭包的地方：防抖、节流。
防抖：执行多次后的最后一次。比如10秒内点了10下button，执行的是第十下click事件，在延迟多少秒后。
节流：在10秒内执行第一次点击、在第二个10秒执行第二个10s的第一次点击。
``var timer = null,
last = 0;
//请把这个放外面
const methods =
fd()
methods.debounce(add, 1000);
,
jl()
methods.throttle(addjl, 700);
,
// 节流
throttle(fn, delay)
return (function (...args)
var nowTime = Date.now();
if (nowTime - last > delay)
last = nowTime;
fn.call(this, args);
)();
,
// 防抖
debounce(fn, delay)
return (function (...args)
if (timer)
clearTimeout(timer);
timer = setTimeout(() =>
fn.call(this, args);
// console.log("???");
// fn();
, delay);
)();
,
;`
vue3和传统的防抖不执行，再return function()() //要加上立即执行
记录--Vue 3 中的极致防抖/节流（含常见方式防抖/节流）
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。
前言
在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。
加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。
防抖或节流原理
防抖（debounce）
如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。
示例代码
function debounce (fn, delay = 300)
let timer = null
return function (...args)
clearTimeout(timer)
timer = setTimeout(()=>
fn.call(this, ...args)
, delay);
使用
debounce(()=> count += 1, 1000)
节流（throttle ）
在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。
示例代码
let timer = null
function throttle (fn, delay = 300)
if(timer == null)
timer = setTimeout(() =>
fn()
clearTimeout(timer)
timer = null
, delay);
使用
throttle(()=> count += 1, 1000)
环境说明
- vue 3
- vite
新封装
这里我分两个模块来讲述。一个是防抖；另一个是节流。
虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。
以上是关于关于闭包 vue3 防抖 节流的主要内容，如果未能解决你的问题，请参考以下文章