了解防抖和节流, 使用闭包的方式完成

已于 2022-04-26 22:58:45 修改
阅读量440 收藏 3
点赞数 3
文章标签： javascript
于 2022-04-26 22:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48524561/article/details/124438891
版权

什么是防抖?

        当用户在一段时间内, 频繁的触发同一种功能的时候; 浏览器只会返回最后一次的结果.

什么是节流?

        当用户在一段时间内, 频繁的触发同一种功能的时候; 浏览器只会减缓速度输出结果. 简单的来说就是浏览器会控制代码的执行次数.

为什么需要防抖和节流?

        在实际的开发中, 数据通常是从后端服务器获取过来的; 如果程序员不使用防抖或节流的话, 当用户频繁的去获取数据时, 也就会向服务器频繁的发送ajax.

        这样会导致浏览器的压力增大, 页面的执行效率降低; 是一个很严重的后果.

什么是闭包?

        简单的来说就是, 一个函数里面再嵌套一个函数; 当前作用域内可以获取到上一级作用里面的东西.

如何使用闭包实现防抖?

(1)事件处理程序一定是一个函数, 所以oninput事件后面的一定是一个函数

(2)调用shake函数, 传入参数1(业务代码)和参数2(延时器的时间)

(3)声明shake函数, 既然是闭包; 那么shake函数里面就得再嵌套一个匿名函数, 将此匿名函数返回给oninput事件的处理程序

(4)处理防抖程序

(5)如果延时器里面使用function的话, this指向永远是window对象; 但是箭头函数的this是遵守就近原则

如何使用闭包实现节流?

hmxs_hmbb
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
防抖与节流的封装函数与使用详解
01-20
为了解决这个问题，我们可以采用函数节流（throttle）和函数防抖（debounce）技术。 函数防抖（debounce）的基本思想是在一系列连续的调用中，只有在最后指定的一段时间内没有新的调用，才会执行函数。这个策略就像...
前端面试：闭包，以及节流和防抖
just a moment
09-12 810
闭包 闭包用于解决，外部函数访问不到内部函数的变量，借助内部函数可以访问到外部函数的变量的特性。就是函数嵌套函数，如下。 当函数执行完后，作用域就会被清理内存也随之回收了，但是闭包函数就是建立在函数内部的，它可以访问到外层函数的变量，所以就会 导致外层函数执行完毕时，它的作用域不会被销毁，直到闭包函数也不存在。 function fun1() { let a = 'fun1的a'; return function fun2() { return a; } co
防抖为什么要使用闭包
m0_51055743的博客
03-11 3609
1. 防抖 从概念上来讲，所谓的闭包指的是一个函数，有权访问另一个函数作用域中的变量的函数。 直观点来讲，JavaScript的闭包就是函数中嵌套函数。 <input type="text" id="input"/> <div id="show"></div> <script> function showInfo(text){ document.getElementById('show').innerHTML=text.target.value }
前端---闭包【防抖以及节流】----面试高频！
最新发布
lxt135744的博客
05-25 477
释放闭包函数调用一次会把内部的--但是这种操作却可以一起保留局部作用域的数据举例：写个按钮--写个点击事件你狂点登录---login函数一直被执行！--这样子容易崩溃！效果：点击登录--等待3s--实现登录。
闭包，防抖和节流都是什么呢
Amanologue的博客
11-05 393
闭包，一个读取其他函数内部变量的函数。防抖和节流也用到了闭包。
JS总结——闭包定义及其应用(防抖与节流)
qq_53008257的博客
05-08 2340
1.什么是闭包 在函数中嵌套函数，内部函数另一个作用域中被调用，就形成了闭包。 2.闭包的例子 我们来看一个闭包的例子 <button id="btn">按钮</button> <script> // 定义全局作用域变量 let a = 3 let b = 4 function outFn(){ //定义函数作用域变量 let a = 1
js：防抖、节流（闭包）
qq_38432089的博客
09-13 1242
如果不使用闭包的话，可以把count变量声明在函数外部，变成一个全局函数。但是这样容易造成变量污染。（2）节流：一段时间内，只有第一次点击会生效，然后开始计时。类似于游戏中的技能cd。（1）防抖：类似于游戏中的回城，每触发一次，就重新读秒，直到读秒完成，才执行。是打通函数内部、外部的通道，使得外部可以。应用场景：百度搜索的输入框、词条预览。闭包会一直留存在内存中，除非手动清理。应用场景：点击按钮，发起后台请求。
浅谈JavaScript节流和防抖函数
11-19
这些选项使得防抖和节流函数的使用更加灵活，可以适应更多的场景需求。 ```javascript function debounce(func, wait, options) { // ...省略部分代码 leading = !!options.leading; maxWait = 'maxWait' in ...
js代码-011 节流防抖,函数珂里化,偏函数
07-16
在JavaScript编程中，有三个非常重要的概念：节流（Throttling）、防抖（Debouncing）以及函数柯里化（Currying）和偏函数（Partial Application）。这些技术主要用于优化性能，提高用户体验，并且在处理事件监听、...
前端必会编程题.doc
04-09
3. **节流（Throttle）**：与防抖类似，节流也是用来限制函数执行频率，但不同的是，节流确保了在一定时间内至少执行一次函数。文件中的 `throttle` 函数就是节流的实现，它使用了时间戳来判断是否达到延迟时间，...
11. code闭包.zip
08-28
- 防抖（debounce）和节流（throttle）函数，用于优化频繁触发的事件处理。 - 函数工厂，动态生成具有特定功能的函数。 - 延迟执行，如setTimeout内的闭包。 - 事件处理中的作用域绑定。 总之，闭包是...
闭包--防抖和节流的应用场景及区别
CC酱写前端的博客
06-30 3410
防抖节流以及使用场景
闭包的典型应用--节流与防抖
FrontEndEngineer的博客
03-21 359
1.定义 函数防抖（debounce） 函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。 简单的说，当一个动作连续触发，只执行最后一次。 函数节流（throttle） 限制一个函数在一定时间内只能执行一次 为了方便理解，我们首先通过一个可视化的工具，感受一下三种环境（正常情况、函数防抖情况 debounce、函数节流 throttle）下，对于mousemove事件回调的执行情况。 竖线的疏密代表事件执行的频繁程度。.
闭包实现防抖与节流
gui3135926448的博客
03-01 674
闭包
防抖节流与闭包
Voiceu的博客
06-05 1670
防抖 考虑一个场景，有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。 // func是用户传入需要防抖的函数 // wait是等待时间 const debounce = (func, wait = 50) => { // 缓存一个定时器id let timer = 0 // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器
javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
04-07 1107
本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map
什么是闭包
热门推荐
2c不高兴的博客
12-01 1万+
一、什么是闭包： ①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。 ②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。 ③我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量
通过闭包实现防抖节流
weixin_42178670的博客
10-17 876
通过闭包实现防抖节流 防抖目的：用户触发时间过于频繁，只执行最后一次。节流目的：控制执行次数。
闭包的使用场景，防抖为什么要使用闭包详解
nameisyaya的博客
11-25 908
那就说说防抖为什么要用闭包吧，不用闭包行吗
防抖和节流为什么用到闭包
08-24
闭包是一种函数内部定义的函数，它可以访问其外部函数的变量和参数。在防抖和节流的实现中，闭包可以用于...通过使用闭包保存状态信息，我们可以在防抖和节流的实现中，灵活地控制函数的执行频率，提高性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值