一个例子学习防抖、节流

时间 2019-12-10

标签一个例子学习节流繁體版

原文原文链接

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

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

先来一个基础的写法：

<!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次。这想一想真是很糟糕透了，怎么优化这个问题呢？html

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

防抖函数代码实现

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

<!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>
复制代码

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

而是延时5秒以后再去作一次请求。函数

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

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

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

节流函数代码实现

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

<!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>
复制代码

从代码能够看出来就是比较当前时间和 lastTime 的差值，当差值大于gapTime的时候就去调用接口。

函数节流的思想在本例来的体现：就是给定一个时间gapTime（好比5秒钟）表明每隔5秒钟请求一次接口搜索。无论你怎么输入，我都是循序渐进的每隔5秒钟请求一次。

至于何时用防抖何时用节流，还得具体问题具体分析。