手动实现一个防抖（deboumce）

最新推荐文章于 2024-03-02 09:39:41 发布
最新推荐文章于 2024-03-02 09:39:41 发布
阅读量448 收藏
点赞数
分类专栏： 前端小基础 文章标签： 防抖节流 防抖 js防抖 deboumce throttle
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wonaixiaoshenshen/article/details/106003606
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖</title>
	</head>
	 /*
	 * 需要利用定时器，
	 * 当我们执行这个函数时，会生成一个定时器，
	 * 但是如果你重复执行这个函数，每次执行函数的第一步是清除上一次的定时器，
	 * 这样就可以达成只有触发操作后超过指定的间隔说明这一次触发才有效，否则就要重新计时等待
	 */
	<body>
		<input value="" id="input" />
		<script>
			function deboumce(fn,Triggering){
				let time=null;
				return function(){
				 clearTimeout(time);
			      time=setTimeout(()=>{
					  fn.apply(this,arguments);
				  },Triggering)
				}
			}
			function success(){
				console.log("防抖成功")
			}
			let inp=document.getElementById("input")
			 inp.addEventListener('input',deboumce(success,1000))
		</script>
	</body>
</html>
我乃小神神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中防抖函数介绍与实现（秒懂如何手写防抖）
百赢出品，必属精品
04-01 1694
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
手动实现JS防抖
一只小鹰
06-24 589
原文地址： https://www.jeremyjone.com/704/，转载请注明。 什么是防抖 事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行该函数。 防抖做什么 防止某些函数的频繁调用，保证页面的稳定流畅和数据准确性。 一个小的例子 使用 underscore 的防抖功能来测试一下效果。 中文网址 在页面中直接导入cdn即可。 https://cdn.bootcss.com/underscore.js/1.9.1/under
JS简单实现防抖和节流
weixin_34283445的博客
07-30 916
一、什么是防抖和节流 Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。 1. 防抖 - debounce 其中一种解决方案就是每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。 原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。...
手动实现一个节流throttle、防抖debounce
WeidForest的博客
08-26 313
手动实现一个节流、防抖节流throttle、防抖debounce区别 节流throttle、防抖debounce区别 首先了解一节流和防抖的区别，然后才好根据我们的需求，进行选择： 节流： 间隔时间之后才可以执行，中间无效。在时间段之内继续操作，停止时间段内的操作执行，过了时间段才可以继续操作。eg:射击游戏开枪的间隔，第一次是直接能开枪的，然后之后不管鼠标点击多少次，只有过了间隔时间才可以开枪，之间的都是无效操作。 防抖： 时间段内执行最后一次操作。在时间端内继续操作，会停止之前没执行完的操作，并执行最新
手动实现防抖 与 节流
swallowblank的博客
06-06 239
其实这种文章网上已经烂大街了，但是我还是要自己去手写一遍，一是便于记忆，二是提高自己的理解。 今年四月份在阿里的实习招聘笔试题中，当时就出现了一道节流的题目，但是当时还没有看到这里，于是便稀里糊涂硬着头地写了，没想到当时自己第一次自主思考的节流的实现，居然和标准答案基本一致，还是挺惊讶的，因为之前从来没看过别人的代码。 什么是防抖与节流？ 防抖 先说说防抖。 抖动，可以理解为一次事件的触发。有的事件有高频触发的特点，比如 mousemove，scroll，mousedown 等，尤其是指针移动这个事件，可以
手写一个事件防抖函数
weixin_57399180的博客
06-18 1304
防抖：事件响应函数在一定时间后执行，如果在这段时间内再调用，则重新计算执行时间；实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器。
Vue.js页面中有多个input搜索框如何实现防抖操作
10-16
首先，`debounce`函数的基本概念是，它创建一个新的函数，这个新函数在被调用后，会等待指定的时间（例如300毫秒），如果在这段时间内没有再次被调用，那么就会执行原本的函数。如果在这段时间内函数又被调用，则会...
tdsp-cli:手动实现一个脚手架
05-30
公司中用脚手架的一系列问题 业务类型多 每个团队都有自己积累下来的东西 比如说拉app的一些方法 jsSDK等 团队工具方法 每次都是从零生成 各种配置 和 移动端适配方案 常用比如日期格式化、防抖截流函数、url拼接等....
JS函数节流和防抖之间的区分和实现详解
10-17
防抖的策略是在用户停止触发事件一段时间后才执行函数，如果在这段时间内又有新的触发，计时器会被重置，导致之前的时间归零。只有当用户停止触发事件且等待时间超过设定值时，函数才会执行。这适用于需要在用户操作...
防抖节流手动实现
旧忆时光的博客
02-17 500
什么是防抖（debounce） 所谓防抖，就是指触发事件后n秒后才执行函数，如果n秒内又触发了事件，则会重新计算函数执行时间（类似死歌放大招~）。 本质是：某一时间段只执行一次， 主要应用场景：大多应用于search搜索联想和window触发resize的时候，不断调整浏览器窗口大小会不断触发这个事件，用防抖来让其只触发一次。节约请求资源。 funtion debounce(func,delay){ let timer = null return (..args)=>{ clearTi.
防抖的实现
u010208165的博客
05-06 1114
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、防抖是什么？ 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 二、使用步骤 1.思路 每次触发事件时都取消
实现防抖,节流
Falicitas的博客
03-21 384
防抖 function debounce(fn,wait,immediate){ let timer=null; return function Fn(){ const context=this; const args=arguments; if(timer) clearTimeout(timer); if(immediate){ let callNow=!timer; tim
防抖和节流的实现
m0_73593563的博客
03-02 692
在没有使用防抖函数之前：当我们需要搜索某些物体信息时会导致浏览器压力很大，性能很低。"防抖函数"的作用就是等到用户停止输入的时候，才去执行函数，避免了多次执行造成的资源浪费
实现防抖节流
qq_39235055的博客
08-11 347
防抖 防抖（debounce）：不管事件触发频率多高，一定在事件触发n秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，就以新的事件的时间为准，n秒后才执行，总之，触发完事件 n 秒内不再触发事件，n秒后再执行。 直接上代码 例如页面窗口一直在改变 ，停止的是n秒后执行事件 window.onload = function (){ window.addEventListener('resize', debounce(handleResize, 200)); } function de
来手写一次防抖节流吧！
yiyi_11的博客
12-07 843
防抖节流作为日常面试中的高频考点，但是每次被问到还是难倒一大片，那就再来手写一次防抖节流加强巩固吧！！！
手写一个防抖和节流函数
m0_45093055的博客
03-28 1153
一. 封装代码 let btn = document.getElementById('btn'); function submit() { console.log('submit1234444') } function debounce(fn,delayTime,trggleNow = false) { let t = null; return function() {
手写 js函数防抖
Alive_tree的博客
08-07 1028
1、什么是防抖 短时间内大量触发同一事件，只会执行一次函数。 函数防抖（debounce），指触发事件后在一定时间（比如 3 秒）内函数只能执行一次，如果这段时间（3 秒）内又触发了事件，则会重新计算函数执行时间。 2、为什么要防抖 我们在滚动屏幕的时候，一秒可以轻松出发多次事件，如果每次事件都请求数据，而且如果事件处理逻辑复杂，浏览器的压力会很大，输入框、滚动条的监听事件处理，如果不做防抖，每输入一个字或者滚动一下屏幕，都会请求数据，这样会造成性能浪费，用户体验也会很糟糕。 3、防抖原理 设置一个定时
JS实现防抖和节流
学习记录
04-22 816
一、什么是防抖和节流 Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。 1. 防抖 - debounce 其中一种解决方案就是每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。 * 原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用...
手写防抖节流
qq_41923898的博客
11-30 102
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手写防抖节流</title> </head> <body> <div> <ul> <li> <h3>防抖概念:</h3> <p>在短时间内多次触发同一个函数，如果n秒内高频
js封装一个防抖函数
最新发布
03-22
下面是一个使用JavaScript封装的防抖函数的示例： ```javascript function debounce(func, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值