JS中防抖和节流的区别是什么

简介: JS中防抖和节流的区别是什么
如果我们要连续点击一个轮播图频繁地触发这个事件,这样可能会出现卡顿的情况,而防抖和节流的主要目的就是为了限制时间的连续触发。

个人观点:

1.防抖:我们在点击触发多次事件,它只会执行最后一次的点击。

2.节流:我们在点击触发后,必须要等待时间过后再执行,多次触发是不会执行的。

区别:区别就是节流不管我们触发多少次 ,它都必须在规定时间内执行这个函数,而防抖只会执行最后一次事件的函数。

节流:

先let a一个全局的状态

一个点击事件

判断a==fasle

终止这个函数(return)

a=false

写我们的逻辑代码

一次性定时器 给一个事件

最后让a=true

防抖:

先let a等于null

一个点击事件

先写一个清除定时器

再让a等于一个一次性定时器

写我们的逻辑代码

以上就是我通过老师给我讲的自己总结的,如果有什么错误的地方,就多谢指导了!
目录
相关文章
|
10天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
14天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
14 1
|
22天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
23天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
24天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
17 1
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
13 0
|
1天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
【4月更文挑战第14天】Cookie是服务器发送至客户端的文本信息,可设置过期时间,可能涉及隐私泄露。SessionStorage仅在当前会话期间有效,适合存储临时数据如登录状态。LocalStorage则长期保存数据,适用于用户偏好设置等。三种方式各有侧重,应用场景不同,选择需依据需求。
9 3
|
14天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
16 1
|
22天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2