自己制作一个简易的防抖来阻止input的onchage和button的click函数同时触发

最新推荐文章于 2024-04-20 16:07:21 发布
最新推荐文章于 2024-04-20 16:07:21 发布
阅读量711 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42268364/article/details/103611698
版权
本文介绍了如何解决input onChange事件与button click事件在同一时刻触发同一函数的问题，通过自制的简易防抖函数，在0.5秒内防止函数重复执行，提升用户体验。代码示例和注意事项一并给出。
摘要由CSDN通过智能技术生成

最近遇到了一个场景，如图
在这里插入图片描述
input的onChange执行的函数和button执行的函数是一个相同的函数，这样就会造成一个问题，如果我修改了input里面的内容，然后同时点击button的话，那么那个函数就会执行两次，造成不友好的体验。所以自制了一个简易的防抖来阻止这个函数在0.5s内同时执行两次。

代码如下:

<body>
  <div>
    <button id="debounce" onclick="debounce()">防抖</button>
  <<
最低0.47元/天 解锁文章
前端李小白
关注
专栏目录
Ant Design Pro 组件事件绑定 Input onChange
a_靖的博客
11-21 8489
Input 组件的 onChange 事件绑定语法 render() { this.shop_change = e => { const { value } = e.target; console.log('shop_change',value) }; return ( <Input placeholder="" onChange={thi...
js点击select触发onchange函数
热门推荐
Ryze
09-29 1万+
点击select 中的不同option,生效日期框填入不同的日期: &lt;table width="800" border="0"&gt; &lt;tr&gt; &lt;td width="180" class="LABEL"&gt;状态：&lt;/td&gt; &lt;td width=&quot
JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题
weixin_45543674的博客
11-27 852
在html的onclick行内添加一个方法，每次触发点击事件都会执行该方法 看似没什么问题，但如果这个方法返回的是一个方法呢，如果我们想让返回出来的方法得到执行，就要在行内的末尾加上一对 () 结果就是每次执行返回出来的内部方法都是新的，闭包？我们想要使用的闭包莫得了。 解决方案 2种： 在script标签中给dom元素的onclick赋值这个方法的执行，返回出来的内部方法就可以应用闭包 使用addEventListener给dom元素添加click事件，赋值依然为外层方法的执行 <body&gt
antd Input输入框 onChange防抖动失效解决方法
my_wings的博客
09-07 5905
delayedChange = debounce((value) => { // do something... }, 500); handleChange = (event) => { delayedChange(event.target.value); }; <Input onChange={this.handleChange}></Input>
简易的防抖节流
zoepriselife316的博客
04-27 131
防抖：如果短时间内大量触发同一事件，只会执行一次函数。 节流：一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。 // 防抖 function debounce(fn, delay) { let timer = null return function () { if (timer) clearTimeout(timer) timer = setTimeout(fn, delay
react： input 输入框 中文onChange事件异常问题& 对input输入进行防抖处理
wang_9909的博客
02-25 4468
当我们使用Input时，我们可能会遇到一个问题，比如需要对用户输入的内容进行搜索时，当用户处于中文输入时，明明没有对内容进行确认，为什么会触发了onChange事件呢？input的防抖操作如何解决呢？
输入框检索防抖
weixin_43356511的博客
08-28 391
输入框检索防抖 input onChange()定时器防抖。 下面展示一些 js实现代码。 // An highlighted block // 防抖搜索 debounce = (value: any) => { let that = this; clearTimeout(this.timer); this.timer = setTimeout(function () { // 切换为搜索 if
React —> input标签输入中文的拼音时候会触发onChange事件解决
weixin_44481662的博客
05-16 2525
在React开发项目的过程中，避免不了会用到input标签（比如在登录、录入用户信息等界面），而使用input标签时候，为了体验限制只能输入数字、或者只能输入数字或者字母、或者只能输入英文等限制条件。 今天在这里记录一下在项目中遇到的一个问题，描述如下： 在做用户登录界面，用户登录名字可以是数字、字母或者是数字和字母的组合，在控制用户输入只能是数字或者字母的时候，用IOS的全键盘输入汉字，在还没有...
javascript针对不确定函数的执行方法.docx
01-19
在JavaScript编程中，有时我们只知道某个函数的名字，但却不确定这个函数是否真的存在。这种情况下，如何有效地判断并安全地执行这些不确定的函数成为了一个值得关注的问题。本文将详细介绍两种常见的处理方法：使用...
react-ant-design输入框输入时拼音字符触发onChange事件（防抖）处理
WebView
12-23 4201
1、在我们做输入框时，一般会进行字数限定，但是会发现输入拼音的时候，拼音字符也会一直触发onchange事件，导致也会让我们的判断失效。 2、下面的方法也是我自己搜索得来，其实场景比较复杂。我的应用场景是非受控的组件下处理。 直接在Input中加入handleComposition事件，这个事件内含三种状态：start-update-end；分别对应着开始输入，正在输入，结束输入三种状态。所以我把我的判断移入到这个事件中进行判断。 3、具体场景可自行去搜索更详细的解答，这里分享我的代码 // 处理将字
Vue的click事件防抖和节流处理详解
12-13
函数防抖 定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = setTimeout(function () {
js中的防抖和节流
study_way的博客
10-12 265
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;ba
原生js中input输入框防抖
m0_63056435的博客
03-23 1025
获取input的dom节点 让他的value防抖 let res = document.getElementById('aaa') let timer = null res.oninput = function(){ clearTimeout(timer) if(res.value===''){ return } timer = setTimeout(
input[type=“file“] change事件第二次不触发
weixin_39818813的博客
11-15 3664
问题： 用input上传图片时，如果第二次传递的跟第一次是一样的图片，那么此时会出现：change事件不再触发。 代码： <input type="file" ref="upload" id="imgUrl" @change="uploadChange" accept="image/jpg, image/jpeg, image/png" /> 解析： 首先这种情况是正常的，不是bug，我们可以看到，每次上传的时候input右侧都有一个文件名。那么change事件会根据这个文件名val
防抖节流用addEventListener生效，onclick不生效问题
muxi229的博客
04-20 961
防抖问题解析：事件监听addEventLisenter防抖生效，onclick点击防抖无效问题
防抖、节流
qq_28773159的博客
03-24 143
防抖、节流
通俗易懂的防抖和节流
weixin_46468143的博客
02-09 2172
当我们为了避免频繁的触发回调导致大量的计算或请求等问题，我们需要用一些方法来处理，这个时候 防抖和节流就出现了 这两个东都与 闭包的形式出现 防抖 什么是防抖？ 防抖：事件被触发n秒之后再执行函数，如果在n秒内再次触发就重新计时 比如：点击一个按钮输出1 当没有做防抖的时候一直点就一直触发 如果做了防抖 点击之后两秒触发 2秒内再次点击就重新计时 当停下来两秒之后会触发 防抖函数 <button>防抖</butto> <script> let btn = docume
文本输入框的change事件与确认按钮的click事件重复调用问题
qq_41756580的博客
10-18 1380
在日常编码中是否会遇到在编写一个输入组件时，我们需要用到文本框的change事件，又需要一个确认按钮的click事件，这两个事件调用的都是一个函数，这时输入完成后，点击确认事件就会调用两次函数，出现重复调用问题。 有的人会说，去掉change事件，或者去电确认按钮，但我认为两个都保留对于用户体验是很好的。 我的解决思路是给一个计数变量，之后使用setTimeout解除计数变量，这样可以避免同时...
解决监听input内容变化，已有onclick方法，onchange无法执行
shuimu_88的专栏
11-12 1033
<t:entitySelect title="请选择" selectedNamesInputId="orgName" selectedIdsInputId="orgId" checkFlag="false" url="registerController.do?datagrid" field="name#名称;unitName#其他名称 idField="id"> </t:e...
宜搭onchage使用
最新发布
06-16
Onchange是宜搭中的一个重要概念，它代表了数据变更或配置变更后，系统自动触发的响应操作。 在宜搭中，Onchange通常用于自动化处理业务流程中的事件，例如用户数据更新、订单状态变化、系统配置调整等。当这些预设...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值