通俗易懂的防抖和节流

最新推荐文章于 2023-05-17 19:58:14 发布
最新推荐文章于 2023-05-17 19:58:14 发布
阅读量175 收藏
点赞数 1
分类专栏： js的基础知识剖析 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/preserveXing/article/details/117108109
版权

通俗易懂的防抖和节流

防抖 原理:延时器

防抖是什么

	通俗讲:就是防止抖动   
	案例:搜索框输入文字后 会去发请求 将搜索的结果展示到下面供你参考
		一般的oninput事件监听后  每输入一个字就会去发请求
			例如:搜索内容'防抖和节流'  你可能不是一次性输入'防抖和节流'
			而是 输入'防抖' 之后 在输入 '和' '节流'或'和节流'
			那么他就会发送2次 或是3次的请求  这样会请求增多 加重服务器任务量
		所以我么要进行防抖  
			怎么防止请求过多呢? 
			总思路:输入完后 我等你两秒 看看你是否还输入 如果2s后还输入那么我就不发请求等你输完   否则  我就发请求 
			思路: 输入后  我进行创建一个延时器 2秒 
				延时器内容就是2秒后要发的请求  
				2秒过后 你还在输入  那么我就清除前面的延时器 在创建一个新的延时器  在重新等你2秒 
				2秒过后 你还不在输入  那么我就执行延时器的函数[发请求]

防抖实现代码

<!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>防抖</tit
最低0.47元/天 解锁文章
门前大桥下.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
防抖和节流的区别和举例（简要说明、形象比喻、容易理解）
南北极之间
05-21 333
总的来说，防抖和节流都是为了减少事件触发频率，优化性能。在一定时间内，多次触发同一个事件，但只有在最后一次触发后，经过指定的等待时间，才会执行相应的事件处理函数。在一定时间内，多次触发同一个事件，但只会执行一次事件处理函数，无论这个事件被触发了多少次。在前端开发技术中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于处理高频事件触发，如用户的点击、滚动、输入等操作。在事件被频繁触发的情况下，防抖可以保证一定时间内只触发一次回调，并且是在事件触发结束后的一定时间内触发。
防抖与节流
m0_66482551的博客
07-12 201
js防抖与节流
学习防抖和节流
鹤渺的星球
05-17 377
以上就是关于防抖和节流的记录啦！总算深入的学习了。
防抖、节流的介绍
热门推荐
Dpl0216的博客
04-23 1万+
针一类类快速连续触发和不可控的高频触发问题，可以用节流和防抖。如通过滚动条的滚动来发起请求、通过输入文字来发起请求这一类的行为，下面用两个例子具体的给大家展示。
节流与防抖
zk2012066650的博客
12-18 258
为什么要节流与防抖 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 什么是防抖 防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时...
防抖和节流的区别是什么？防抖和节流的实现 详解！
圆圆的 JavaScript 博客
07-13 7762
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。 防抖 防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 function debounce(func, wait, immediate = true) { let timer; // 延迟执行函数 const later = (context, args
通俗易懂的随机森林模型讲解
02-20
大家好，我是你们的好朋友小木。对于随机森林的模型，网上已经有灰常灰常多的讲解，大家讲的也非常的不错。但绝大多数大神讲解都是注重于理论，把算数的地方都给忽略了，我这次要以举例子的方法来讲解，这样可以让...
通俗易懂的三极管工作原理
01-20
晶体三极管是p型和n型半导体的有机结合，两个pn结之间的相互影响，使pn结的功能发生了质的飞跃，具有电流放大作用。晶体三极管按结构粗分有npn型和pnp型两种类型。如图2-17所示。（用Q、VT、PQ表示）三极管之所以...
SVM原理详解，通俗易懂
01-27
支持向量机(SupportVectorMachine)是Cortes和Vapnik于1995年首先提出的，它在解决小样本、非线性及高维模式识别中表现出许多特有的优势，并能够推广应用到函数拟合等其他机器学习问题中[10]。 支持向量机方法是建立...
通俗易懂的PID算法理解
01-24
通俗易懂的PID算法理解，通俗易懂的PID算法理解，通俗易懂的PID算法理解
19、节流和防抖的区别以及应用场景的理解
天界程序员的博客
02-07 7262
节流与防抖的区别是什么、应用场景、图解
防抖和节流的概念及案例整理
weixin_45279175的博客
11-25 2138
防抖和节流的概念及案例整理前言一、概念1.防抖（debounce）的概念：2.节流（throttle）的概念：二、防抖和节流的不同三、防抖案例四、节流案例总结个人理解，欢迎指正。如有雷同，不胜荣幸。 前言 防抖和节流在JS中是一个非常重要的方法，这两个方法可以让浏览器的工作量大幅降低。 那么在正式整理之前呢，我们要搞清楚一个问题，那就是防抖（debounce）和节流（throttle）是什么，如何使用它们，它们之间又有什么区别？ 在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、
防抖节流详细用法和区别 - 详解版
xiaoyingyings的博客
03-10 1943
前言 防抖节流是个老生常谈的话题，也是面试出现频率极高的问题。对于防抖节流，网上资料很多，但是感觉好多文档讲的不是很清晰。本文将从防抖节流概念开始，到具体实现的代码解析，一步一步讲述如何实现防抖节流，如有不同的意见欢迎讨论。 本次讲解防抖节流将使用vue方式，但是其核心代码跟普通js代码一致，看具体需求对应实现即可。 防抖节流概念应用场景实现方式 概念 防抖： 规定时间内只触发一次，在规定时间内触发，会取消原来计时，开始重新计时。 节流： 规定时间内只触发一次。如果规定时间内再次触发，则什么都不做，也不.
防抖和节流原理是使用闭包和延时器
zhu_hangfeng的博客
03-30 246
防抖和节流原理是使用闭包和延时器
什么是防抖和节流？如何实现防抖和节流？ 根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”、“Bom浏览器对象模型”。
CYSNLD的博客
08-18 724
什么是防抖和节流？如何实现防抖和节流？ 根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”、“Bom浏览器对象模型”。
js中的防抖和节流的常见用法，以及两者的区别
不染-9732
06-12 2168
小结：js中中的防抖和节流 防抖和节流的常见用法 防抖最常见的用法是在浏览器的滚动条的监听上 滚动条执行的次数是非常频繁的，滚动一次会让方法块中的代码执行很多次，我们不需要这么频繁的调用功能块，使用防抖来解决这个问题 //这里使用延时器进行了函数的防抖功能的实现 let timer; window.onscroll = function () { clearTimeout(timer); timer = setTimeout(function () {
定时器防抖案例
图图小淘气的博客
11-30 689
HTML： <body> <div class="wrapper"> <div class="center"> </div> <div class="main"> <div class="left"> <a href="#" class="sy">首页</a&gt...
什么是防抖节流
qq_36281882的博客
05-29 1万+
函数防抖，函数节流，核心，区别
如何实现防抖和节流
最新发布
05-25
防抖和节流是前端开发中常用的两种性能优化技术。 防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又触发了该事件，则重新计时。通俗的说，就是在规定时间内，如果事件被多次触发，则只执行最后一次触发的事件。适用于如搜索框输入联想、无限滚动等场景。 实现防抖的代码如下： ```javascript function debounce(fn, wait) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, wait); }; } ``` 节流的原理是在一定时间内只触发一次事件，即每隔一段时间执行一次事件。适用于如页面滚动、按钮点击等场景。 实现节流的代码如下： ```javascript function throttle(fn, wait) { let timer = null; return function() { if (!timer) { timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, wait); } }; } ``` 以上两个函数都是闭包函数，使用时可以直接调用函数并传入需要执行的回调函数和等待时间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值