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

最新推荐文章于 2024-04-20 16:07:21 发布
原创 最新推荐文章于 2024-04-20 16:07:21 发布 · 769 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何解决input onChange事件与button click事件在同一时刻触发同一函数的问题，通过自制的简易防抖函数，在0.5秒内防止函数重复执行，提升用户体验。代码示例和注意事项一并给出。

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

代码如下:

<body>
  <div>
    <button id="debounce" onclick="debounce()">防抖</button>
  </div
最低0.47元/天 解锁文章
react： input 输入框 中文onChange事件异常问题& 对input输入进行防抖处理
wang_9909的博客
02-25 5374
当我们使用Input时，我们可能会遇到一个问题，比如需要对用户输入的内容进行搜索时，当用户处于中文输入时，明明没有对内容进行确认，为什么会触发了onChange事件呢？input的防抖操作如何解决呢？
react给Input绑定onChange事件
沐雨橙风ιε的博客
09-05 2321
react给Input绑定onChange事件
antd Input输入框 onChange防抖动失效解决方法
my_wings的博客
09-07 6158
delayedChange = debounce((value) => { // do something... }, 500); handleChange = (event) => { delayedChange(event.target.value); }; <Input onChange={this.handleChange}></Input>
input框的onblur失焦事件与button的onclick点击事件冲突
coco723的博客
05-17 1530
问题 输入框，需要处理onblur事件与onclick事件，在项目中点击button按钮的时候同时也触发了onblur事件 解决方法： 经过一步步定位问题发现该问题，查找资料后进一步测试问题得以解决，将button的onclick事件更改为onMouseDown ...
简易的防抖节流
zoepriselife316的博客
04-27 167
防抖：如果短时间内大量触发同一事件，只会执行一次函数。 节流：一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。 // 防抖 function debounce(fn, delay) { let timer = null return function () { if (timer) clearTimeout(timer) timer = setTimeout(fn, delay
输入框检索防抖
weixin_43356511的博客
08-28 468
输入框检索防抖 input onChange()定时器防抖。 下面展示一些 js实现代码。 // An highlighted block // 防抖搜索 debounce = (value: any) => { let that = this; clearTimeout(this.timer); this.timer = setTimeout(function () { // 切换为搜索 if
javascript针对不确定函数的执行方法.docx
01-19
在JavaScript编程中，有时我们只知道某个函数的名字，但却不确定这个函数是否真的存在。这种情况下，如何有效地判断并安全地执行这些不确定的函数成为了一个值得关注的问题。本文将详细介绍两种常见的处理方法：使用...
宜搭onchage使用
最新发布
06-16
Onchange是宜搭中的一个重要概念，它代表了数据变更或配置变更后，系统自动触发的响应操作。 在宜搭中，Onchange通常用于自动化处理业务流程中的事件，例如用户数据更新、订单状态变化、系统配置调整等。当这些预设...
react-ant-design输入框输入时拼音字符触发onChange事件（防抖）处理
WebView
12-23 4542
1、在我们做输入框时，一般会进行字数限定，但是会发现输入拼音的时候，拼音字符也会一直触发onchange事件，导致也会让我们的判断失效。 2、下面的方法也是我自己搜索得来，其实场景比较复杂。我的应用场景是非受控的组件下处理。 直接在Input中加入handleComposition事件，这个事件内含三种状态：start-update-end；分别对应着开始输入，正在输入，结束输入三种状态。所以我把我的判断移入到这个事件中进行判断。 3、具体场景可自行去搜索更详细的解答，这里分享我的代码 // 处理将字
js中的防抖和节流
study_way的博客
10-12 314
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;ba
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 () {
react-debounce-input:React组件以去抖动的onChange呈现Input
05-02
React反跳输入 React组件使用去抖动的onChange呈现Input，Textarea或其他元素。 可用作<input type="text" />或<textarea />替代 演示版 Codepen示范 安装 NPM npm install --save react-debounce-input 纱 yarn add react-debounce-input 1998脚本标签： < script src =" https://unpkg.com/react@16.0.0/umd/react.production.min.js " > </ script > < script src =" https://unpkg.com/react-debounce-input/build/react-debounce-input.js " > </ script > (Module
原生js中input输入框防抖
m0_63056435的博客
03-23 1091
获取input的dom节点 让他的value防抖 let res = document.getElementById('aaa') let timer = null res.oninput = function(){ clearTimeout(timer) if(res.value===''){ return } timer = setTimeout(
input的onchange事件实际触发条件与解决方法
热门推荐
weixin_34014277的博客
12-28 1万+
  input中onchange事件已经属于元老级别了，并且现在同onclick一样使用频率很高，然而onchange的机制实际上有很多童鞋并不清楚，我们通过实例来分析这个事件的特征。 触发onchange 首先页面有一个input标签，并且已绑定onchange事件，如： 1&lt;input type="text" onchange="console.log(this.val...
input[type=“file“] change事件第二次不触发
weixin_39818813的博客
11-15 3872
问题： 用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 1242
防抖问题解析：事件监听addEventLisenter防抖生效，onclick点击防抖无效问题
input 中事件 onchange onpropertychange 和oninput事件的差别
COCOLI_BK的博客
05-30 931
汇总onchange onpropertychange 和oninput事件的差别： 1、onchange事件与onpropertychange事件的差别： onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每添加或删除一个字符就会触发。通过js改变也会触发该事件。可是该事件IE专有。 ...
JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题
weixin_45543674的博客
11-27 913
在html的onclick行内添加一个方法，每次触发点击事件都会执行该方法 看似没什么问题，但如果这个方法返回的是一个方法呢，如果我们想让返回出来的方法得到执行，就要在行内的末尾加上一对 () 结果就是每次执行返回出来的内部方法都是新的，闭包？我们想要使用的闭包莫得了。 解决方案 2种： 在script标签中给dom元素的onclick赋值这个方法的执行，返回出来的内部方法就可以应用闭包 使用addEventListener给dom元素添加click事件，赋值依然为外层方法的执行 <body&gt
关于input文本框，设置为readonly后，onchage事件无响应处理方案
chemyoo的博客
11-27 7201
input文本框，设置为readonly后，由于onchage事件是当文本框失去焦点后才会触发的，所以导致使用jq绑定事件无效。 处理方式使用原生js获取到文本框，document.inuptName.onchange = function (){ alert('onchange 事件触发')}。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值