本文由小芭乐发表

0. 引入

首先举一个例子：

模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>没有防抖</title>

    <style type="text/css"></style>

    <script type="text/javascript">

        window.onload = function () {

            //模拟ajax请求

            function ajax(content) {

                console.log('ajax request ' + content)

            }

            let inputNormal = document.getElementById('normal');

            inputNormal.addEventListener('keyup', function (e) {

                ajax(e.target.value)

            })

        }

    </script>

</head>

<body>

    <div>

        1.没有防抖的输入：

        <input type="text" name="normal" id="normal">

    </div>

</body>

</html>

效果：在输入框里输入一个，就会触发一次“ajax请求”（此处是console）。

没有防抖和节流

缺点：浪费请求资源，可以加入防抖和节流来优化一下。

本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看吧。

1. 防抖（debounce）

1.1 什么是防抖

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

1.2 应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

1.3 实现

还是上述列子，这里加入防抖来优化一下，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>加入防抖</title>

    <style type="text/css"></style>

    <script type="text/javascript">

        window.onload = function () {

            //模拟ajax请求

            function ajax(content) {

                console.log('ajax request ' + content)

            }

            function debounce(fun, delay) {

                return function (args) {

                    //获取函数的作用域和变量

                    let that = this

                    let _args = args

                    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用

                    clearTimeout(fun.id)

                    fun.id = setTimeout(function () {

                        fun.call(that, _args)

                    }, delay)

                }

            }

            let inputDebounce = document.getElementById('debounce')

            let debounceAjax = debounce(ajax, 500)

            inputDebounce.addEventListener('keyup', function (e) {

                debounceAjax(e.target.value)

            })

        }

    </script>

</head>

<body>

    <div>

        2.加入防抖后的输入：

        <input type="text" name="debounce" id="debounce">

    </div>

</body>

</html>

代码说明：

1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

效果：

加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。

加入防抖

2.节流（throttle）

2.1 什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.2 应用场景

(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

2.3 实现

还是上述列子，这里加入节流来优化一下，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>加入节流</title>

    <style type="text/css"></style>

    <script type="text/javascript">

        window.onload = function () {

            //模拟ajax请求

            function ajax(content) {

                console.log('ajax request ' + content)

            }

            function throttle(fun, delay) {

                let last, deferTimer

                return function (args) {

                    let that = this;

                    let _args = arguments;

                    let now = +new Date();

                    if (last && now < last + delay) {

                        clearTimeout(deferTimer);

                        deferTimer = setTimeout(function () {

                            last = now;

                            fun.apply(that, _args);

                        }, delay)

                    } else {

                        last = now;

                        fun.apply(that, _args);

                    }

                }

            }

            let throttleAjax = throttle(ajax, 1000)

            let inputThrottle = document.getElementById('throttle')

            inputThrottle.addEventListener('keyup', function (e) {

                throttleAjax(e.target.value)

            })

        }

    </script>

</head>

<body>

    <div>

        3.加入节流后的输入：

        <input type="text" name="throttle" id="throttle">

    </div>

</body>

</html>

效果：实验可发现在持续输入时，会安装代码中的设定，每1秒执行一次ajax请求

加入节流

3. 小结

总结下防抖和节流的区别：

-- 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

-- 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

如有问题，欢迎指正。

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

详谈js防抖和节流的更多相关文章

深入理解JS防抖与节流
参考博客:JS防抖和节流,感谢作者的用心分享日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...
因为它，我差点删库跑路：js防抖与节流
前言前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...
面试必问题：JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
2019 面试准备 - JS 防抖与节流 (超级重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址本文涉及知识点: 防抖与节流重绘与回流浏览器解析 URL DNS 域名解析 ...
js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖经过一段事件才执行某个操作,如 ...
JS 防抖和节流
防抖和节流在处理高频事件,类似于window的resize或者scorll,或者input输入校验等操作时.如果直接执行事件处理器,会增大浏览器的负担,严重的直接卡死,用户体验非常不好. 面对这种情 ...
JS防抖和节流：原来如此简单
一.函数防抖前端开发工作中,我们经常在一个事件发生后执行某个操作,比如鼠标移动时打印一些东西: window.addEventListener("mousemove", ()=& ...
js防抖与节流了解一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

软件测试---测试模型（V、W、H）
一.V测试模型 1.V模型示意图: 单元测试:又叫模块测试,针对软件设计中的最小单位—>程序模块集成测试:又叫组装测试,通常在单元测试的基础上,将所有程序模块进行有序.递增测试. 系统测试:把 ...
Shiro与Spring整合
Shiro引入Spring 添加jar包/maven配置  <dependency> <groupId>org.apache.shi ...
MySQL数据库（四）多表查询
两张假设有两张表格A和B,把表格当作一个集合,那么表格中的记录就是集合中的一个元素. 两张表格如下: TableA:TableB: 2.1 内连接(只有一种场景) inner join 或者join( ...
C++ STL next_permutation(快速排列组合）
排列组合必备!! https://blog.csdn.net/bengshakalakaka/article/details/78515480
在windows上安装VTK
看了很多教程,花了1天半的时间装上了,记录下. 前置条件:我安装了VS2015,用来编译工程. 参考资料官方:http://www.vtk.org/Wiki/VTK/Building 安装:http ...
2019/3/2周末 java集合学习（一）
Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...
使用koa2+es6/7打造高质量Restful API
前言如今nodejs变得越来越火热,采用nodejs实现前后端分离架构已被多数大公司所采用. 在过去,使用nodejs大家首先想到的是TJ大神写的express.js,而发展到如今,更轻量,性能更好 ...
STM32 HAL库的使用心得
1.I2C函数中HAL_I2C_Mem_Write和HAL_I2C_Master_Transmit有啥区别?{ 使用HAL_I2C_Mem_Write等于先使用HAL_I2C_Master_Tran ...
MAC OS 更新GIT版本时遇到的问题
在更新git版本时,没有备份就删掉了原先的版本,在安装完2.18.0的新版本后,使用命令行git --version,返回错误git not a developer tool or in PATH. ...
MFC对话框和属性表
对话框主要有两类,分为模式和无模式,它们的功能都被封装在了CDialog中.与对话框相近的是属性表,属性表实际上是具有制表页(TAB 页)的对话框,将对话框中控件更好的组织在一起.借助Cpropert ...

详谈js防抖和节流