Input框防抖动

go4it 发布于2019-08-23 11:34 / 2671人阅读

摘要：什么是抖动在框输入的时候，当我们监听事件的时候，由于事件是一旦输入框内容发生改变就触发我们绑定的回调函数，在实际当中我们往往会根据输入框内容去发送一些请求，这样一旦改变就触发无疑是耗时的，而且影响性能这个时候，我们就可以使用防抖动。

什么是抖动?

在input框输入的时候，当我们监听input事件的时候，由于input事件是一旦输入框内容发生改变就触发我们绑定的回调函数，在实际当中我们往往会根据输入框内容去发送一些请求，这样一旦改变就触发无疑是耗时的，而且影响性能,这个时候，我们就可以使用防抖动。实现的大概思路就是我们可以自定义隔多长时间来触发我们的处理操作(例如ajax请求数据等)

实现

var timer = null
element.input = function () {
    clearTimeout(timer) // 每次进来的时候都将之前的清除掉，如果还没到一秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过一秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
    timer = setTimeout(function () {
        // 在这里进行我们的操作  这样就不会频繁的进行我们这里面的操作了
    }, 1000)
}

云服务器 GPU云服务器图片抖动抖动抖动层抖动窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97148.html

JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

chadLi 2019-08-02 14:05 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

EscapedDog 2019-08-23 14:38 评论0 收藏0
通过focusout事件解决IOS键盘收起时界面不归位的问题

摘要：原因经查是输入框的事件无法冒泡。这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。输入框失去焦点，要把键盘推出页面的滚动部分还原。问题症状今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状：页面结构出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的...

vvpale 2019-08-02 15:34 评论0 收藏0
通过focusout事件解决IOS键盘收起时界面不归位的问题

摘要：原因经查是输入框的事件无法冒泡。这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。输入框失去焦点，要把键盘推出页面的滚动部分还原。问题症状今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状：页面结构出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的...

lifesimple 2019-08-26 18:37 评论0 收藏0
JavaScript复制内容到剪贴板

摘要：原文链接最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。完整代码如下复制成功总结以上就是关于如何实现复制内容到剪贴板，附上几个链接兼容性原文链接：https://github.com/axuebin/ar... 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。常见方法查了一下...

ideaa 2019-08-22 14:54 评论0 收藏0