一个例子学习防抖、节流

最新推荐文章于 2022-10-21 21:32:54 发布

转载最新推荐文章于 2022-10-21 21:32:54 发布 · 618 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c19e2e3f265da612e289585

文章标签：

#javascript #ViewUI

防抖、节流函数主要是用来限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象的。

比如我在项目中遇到过输入查询的功能，在搜索框中输入文字调用查询接口搜索，返回与搜索框匹配的内容。

先来一个基础的写法：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {  //输入时调用searchFunc函数
            searchFunc();
        })
    	var searchFunc = function() {
    	    console.log('请求接口返回搜索内容。。。');
    	}
    </script>
</body>
</html>
复制代码

这是这个搜索功能实现的雏形，但是运行起来会发现，只要我不断的输入，它就会不断地调用searchFunc 方法去请求接口，就是说我输入10次就会请求10次。这想想真是很糟糕透了，怎么优化这个问题呢？

接下来就要用到防抖思想了。

防抖函数代码实现

（用本例解释）防抖其实就是加上一个定时器，规定它延迟一定的时间再去请求接口。

<!DOCTYPE html>
<html>
<head>
    <title>防抖实现搜索</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {
            searchFunc();
	    })
	var timer = null;
	var searchFunc = function() {
	    timer && clearTimeout(timer);
	    timer = setTimeout(function() {
	        console.log('请求接口返回搜索内容。。。');
	    }, 5000);
	}
    </script>
</body>
</html>
复制代码

加上了定时器之后，再运行看看，它不会再是输入多少次就请求多少次了。

而是延时5秒之后再去做一次请求。

需要注意的是：在这个5秒钟的时间里，你不断的输入，定时器会不断的被清除再重新设置一个。举个例子：你第一秒的时候第一次输入内容，那它开始设置一个定时器并且延时5秒钟，等到第四秒钟的时候你再次输入内容，此时程序是先把你之前设置的定时器先清除再给你重新设置一个新的定时器，这个定时器又延时5秒钟。也就是说这个定时器以你这5秒钟时间内最后一次输入的为准。

这样就解决了频繁请求的问题。

另外，我们还可以使用函数节流来优化这个问题。

节流函数代码实现

（用本例解释）给定一个间隔时间，计算一个等待时间，当等待时间大于间隔时间，则再去请求接口

<!DOCTYPE html>
<html>
<head>
    <title>节流实现搜索</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {
            searchFunc(5000);
        })
        var lastTime = null, nowTime = null;
        var searchFunc = function(gapTime) {
            nowTime = new Date().getTime();
            if(nowTime - lastTime > gapTime || !lastTime) {
                console.log('请求接口返回搜索内容。。。');
                lastTime = nowTime;
            }
        }
    </script>
</body>
</html>
复制代码