关注前端 | 前端博客
当前位置: JavaScript > JS-函数防抖

JS-函数防抖

2018-07-10 分类:JavaScript 作者:管理员 阅读(72)

什么是函数函数防抖?

函数执行过一次后,在等待某时间段内不能再次执行。在等待时间内触发此函数,则重新计算等待时间

函数防抖使用场景

1.每次 resize/scroll 触发统计事件
2.文本输入验证(连续输入文字后发生AJAX请求进行验证,验证一次就好)
3.mousemove,mousedown
4.加载更多(这个与前2个还是有点区别)

实现思路如下:

将目标方法(动作)包装在setTimeout里面,然后这个方法是一个事件的回调函数,如果这个回调一直执行,那么这些动作就一直不执行。为什么不执行呢,我们搞了一个clearTimeout,这样setTimeout里的方法就不会执行! 为什么要clearTimeout呢,我们就需要将事件内的连续动作删掉!待到用户不触发这事件了。那么setTimeout就自然会执行这个方法,那么这个方法用在什么地方呢,就是用于input输入框架的格式验证,假如只是验证都是字母也罢了,太简单了,不怎么耗性能,如果是验证是否身份证,这性能消耗大,你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全,需要将已有的输入数据往后端拉一个列表,频繁的交互,后端肯定耗不起,这时也需要这个,如隔350ms。这个保证了正常的用户每输入1,2个字符就能触发一次。如果用户是输入法狂魔,也可以狠制他每输入3~6个字符触发一次。
这个方法的重点是,它在用户不触发事件的时,才触发动作,并且抑制了本来在事件中要执行的动作。其他应用场合:提交按钮的点击事件。

场景之一:用户输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数防抖节流-用户输入</title>
</head>
<body>
  <input type="text">;
</body>
<script>
//函数防抖
function debounce(func, delay) {
    var timeout;
    return function(e) {
        //console.log("清除",timeout,e.target.value)
        clearTimeout(timeout);
        var context = this, args = arguments
        //console.log("新的",timeout, e.target.value)
        timeout = setTimeout(function(){
          // console.log("----")
          func.apply(context, args);
        },delay)
    };
};
// 绑定监听
document.querySelector("input").addEventListener('input', debounce(function(e) {
  console.log("change", e.target.value, new Date-0)
}, 380),false);
</script>
</html>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JS-函数防抖

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线