JavaScript防抖和节流

问题还原

我们先来通过代码把常见的问题还原:

<html>

<head>

	<meta charset="utf-8">

	<title>问题演示</title>

</head>

<body>

	<script type="text/javascript">

		window.onload = function(){

			// 没有处理防抖和节流的代码

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

			let ajax = content=>{

				console.log('ajax:' + content);

			}

			norInput.addEventListener('keyup',e=>{

				ajax(e.target.value)

			})

			// console.log(debounce()())

		}

	</script>

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

</body>

</html>

在上面的程序中，看上去是没有什么问题，但是用户每输入一个字符，都会向后端发起一次请求，而这只是一个用户，如果同时很多用户进行相同的操作，无异于是给服务端造成极大的压力。

而解决这种问题，有很多种合适的方法，但是下文要说到的，是关于JavaScript当中的防抖和节流操作。

防抖

什么是防抖

当用户在触发一次事件n秒后在执行回调函数，如果重复触发则进行重新计时。

根据防抖的逻辑，下面通过代码来进行模拟：

<html>

<head>

	<meta charset="utf-8">

	<title>问题演示</title>

</head>

<body>

	<script type="text/javascript">

		window.onload = function(){

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

			// 创建一个函数模拟ajax请求

			let ajax = content=>{

				console.log('ajax:' + content);

			}

			// 创建防抖函数

			let debounce = (fn,delay) => {

				return function(args){

					let that = this;

					let param = args;

					// 每次事件触发 清除当前的timmer 然后重写调用

					clearTimeout(fn.id);

					fn.id = setTimeout(function(){

						fn.call(that,param)

					},delay)

				}

			}

			let deb_func = debounce(ajax,500)

			norInput.addEventListener('keyup',e=>{

				deb_func(e.target.value)

			})

		}

	</script>

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

</body>

</html>

上面的demo运行后，你会发下，用户如果停止输入后的一段时间才会发起ajax请求，而如果用户持续输入，则计时器会不断的刷新，再这个过程中并不会发生请求，直到用户停止输入，才会开始计时，时间一到，才会发送请求。

这样就能够有效的减少因为频繁发送请求给服务器带来过大的压力。

使用场景

  1. resize 事件或者scroll事件等，可以通过防抖减少触发次数
  2. 用户在输入框中频繁输入

节流

什么是节流

设置一个时间范围，在一定的时间范围内，仅允许执行一次执行一次事件的回调函数，也就是说只要在规定时间范围内，无论事件触发几次，都只能执行一次回调函数。

我们通过click事件来还原下事故现场:

<html>

<head>

	<meta charset="utf-8">

	<title>节流</title>

</head>

<body>

<input type="button" id="btn" value="点击">

<script type="text/javascript">

let oBtn = document.getElementById('btn');

let ajax = ()=>{

	console.log("ajax发送请求")

}

oBtn.addEventListener('click',()=>{

	ajax();

})

</script>

</body>

</html>

当用户每一次点击后，都会发送一次请求，点击不断，请求不断。如同生命不息，战斗不止。可想而知，一旦有人无聊的一直点击，那么请求次数将会变得很可观。

下面是我们根据节流的原理来实现的示例代码:

<html>

<head>

	<meta charset="utf-8">

	<title>问题演示</title>

</head>

<body>

	<script type="text/javascript">

		window.onload = function(){

			// 获取元素

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

			// 模拟ajax请求

			let ajax = ()=>{

				console.log("ajax发送请求....")

			}

			// 节流函数

			let throttle = (func,wait) =>{

				var timeout ;

				var previous = 0;

				return function(){

					var _this = this;

					args = arguments;

					if(!timeout){

						timeout = setTimeout(function(){

							timeout = null;

							func.apply(_this,args);

						},wait)

					}

				}

			}

			let thro_func = throttle(ajax,3000);

			// 绑定事件

			oBtn.addEventListener('click',()=>{

				thro_func();

			})

		}

	</script>

	<input type="button" name="normal" id="normal" value="点击">

</body>

</html>

通过上面的案例，我们可以做到，当用户点击一次后，计时器开始，这当中无论发生几次事件触发，都仅仅会执行一次回调。

当然，想要实现节流的方法不止使用定时器这一种方案，还可以选择使用时间戳，再或者其他方法也不是不行，本文的目的仅仅是为了阐述和说明节流和防抖这两种减少服务器压力的方法而已。

使用场景

  1. 鼠标不断点击的情况
  2. 页面无限加载，每隔一段时间发起请求而不是用户停止滚动发起请求
  3. ...

来聊聊JavaScript中的防抖和节流的更多相关文章

  1. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  2. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  3. 直播开始：'云榨汁机'诞生记--聊聊JavaScript中的'业务建模'

    闭包是JavaScript中的一个重要特性,在之前的博文中,我们说闭包是一个'看似简单,其实很有内涵'的特性.当我们用JavaScript来实现相对复杂的业务建模时,我们可以如何利用'闭包'这个特性呢 ...

  4. JS中的防抖与节流

    什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当 ...

  5. Js中的防抖与节流函数

    1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于 ...

  6. 面试说：聊聊JavaScript中的数据类型

    前言 请讲下 JavaScript 中的数据类型? 前端面试中,估计大家都被这么问过. 答:Javascript 中的数据类型包括原始类型和引用类型.其中原始类型包括 null.undefined.b ...

  7. JS中的防抖和节流

    JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...

  8. 聊聊Javascript中的AOP编程

    Duck punch 我们先不谈AOP编程,先从duck punch编程谈起. 如果你去wikipedia中查找duck punch,你查阅到的应该是monkey patch这个词条.根据解释,Mon ...

  9. JavaScript函数的防抖和节流

    防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let tim ...

随机推荐

  1. python+Appium自动化：TouchAction九宫格实战

    TouchAction Touch Action包含一系列操作,比如按压.长按.点击.移动.暂停. 使用TochAction需要先导入对应的模块 from appium.webdriver.commo ...

  2. Rasterize order group

    增加shade 这里的并行 可以让更多 ...并行只在write那里wait 语法 struct I {float a [[raster_order_group(0)]];};

  3. java实现简单的单点登录 （转）

    摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现手段,并且给出Web-SSO ...

  4. python中的pyc和pyo文件和__pyc__文件夹

    一.命令生成 pyc 文件 *.py:源码文件,由 Python 程序解释. *.pyc:源码经编译后生成的二进制字节码(Bytecode)文件. *.pyo:优化编译后的程序,也是二进制字节码文件. ...

  5. Map遍历效率 ： entrySet > keySet

     1    //entrySet()  2     for (Entry<String, String> entry : map.entrySet()) {  3         Stri ...

  6. BZOJ 1283: 序列 (最大费用流)

    题意 有n个正整数,要选取里面的一些数,在保证每m个连续的数中最多选k个的情况下,使得得到的值最大. 分析 我们可以把问题先转化为选k次,每一次每m个数只能选一个.那么根据贪心的策略,每m个里一定会选 ...

  7. Xilinx FFT IP核缩放因子说明

    以1024点FFT为例, reg [9:0] scale_sch = 10'b11_10_01_01_01; 流水线结构中,将每个基 2 的蝶形处理单元视为一个阶段. 每个阶段进行一次数据的缩减,缩减 ...

  8. Java基础_死锁、线程组、定时器Timer

    一.死锁问题: 死锁是这样一种情形:多个线程同时被阻塞,它们中的一个或者全部都在等待某个资源被释放.由于线程被无限期地阻塞,因此程序不可能正常终止. 比如,线程一需要第一把所,此时锁处于空闲状态,给了 ...

  9. 1.RabbitMq - Work 模式

    RabbitMq - Work 模式 一.什么是Work模式 如果有几个消息都需要处理,且每个消息的处理时间很长,仅有一个消费者,那么当它在处理一个消息的时候,其他消息就只有等待. 等待有时候是好的, ...

  10. Qt Delgate的使用 简单说明

    (一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型基于QA ...