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. Event Binding in Angular

    https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...

  2. java.lang.NoClassDefFoundError: javax/servlet/ServletOutputStream

    扩展阅读:https://blog.csdn.net/kimylrong/article/details/50353161

  3. P3384——树链剖分&&模板

    题目描述 链接 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: ...

  4. $ python manage.py makemigrations You are trying to add a non-nullable field 'name' to course without a default; we can't do that (the database needs something to populate existing rows). Please selec

    问题: $ python manage.py makemigrationsYou are trying to add a non-nullable field 'name' to course wit ...

  5. vue 解析时表达式闪烁的问题

    现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...

  6. cookie与session的区别？

    一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.同时我们也看到,由于才服务器端保持状态的方 ...

  7. SpringBoot+Mybatis-Plus两种分页方法

    用到的依赖: <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus ...

  8. 【csp模拟赛2】 爆搜 方格加数

    [题目描述] xyz1048576正在玩一个关于矩阵的游戏. 一个n*m的矩阵,矩阵中每个数都是[1,12]内的整数.你可以执行下列两个操作任意多次: (1)指定一行,将该行所有数字+1. (2)指定 ...

  9. Java后台开发精选知识图谱

    1.引言: 学习一个新的技术时,其实不在于跟着某个教程敲出了几行.几百行代码,这样你最多只能知其然而不知其所以然,进步缓慢且深度有限,最重要的是一开始就对整个学习路线有宏观.简洁的认识,确定大的学习方 ...

  10. 5.使用Ribbon实现客户端侧负载均衡

                                Ribbon实现客户端侧负载均衡 5.1. Ribbon简介 Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法 ...