一、什么是防抖函数：

防抖函数是指事件多次不间断触发，在一定时间内没有再触发时，执行最后一次触发的事件函数。举个栗子，你每天给你女神送牛奶，女神从未响应过你的好意，但当你一段时间没有送牛奶时，女神就会开始响应你。这就是一个简单的防抖机制（看来女神精通防抖函数）。

二、作用

那么防抖函数有什么作用呢？我们为什么要学防抖函数呢？

他可以优化前端性能，在一些频繁触发的事件里尤为明显，例如窗口resize事件，屏幕scroll事件，鼠标mousemove事件。因为这些事件触发频繁，如果不用防抖，那么事件的绑定函数会运行无数次，严重影响性能。使用了防抖，就可以实现，当事件在我们规定的延迟时间内不再触发，我们就执行一次事件绑定函数。

三、应用

一、使用Echats等可视化类库实现当窗口宽度变化而变化图形

二、图片、列表懒加载

三、输入框keyup实时搜索

等等.......(想到再补充)

四、实现

本案例实现的是，实时监听用户输入事件，在用户停止输入延迟一秒后执行我们相关的事件处理函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>闭包应用，防抖函数</title>
</head>
<body><input type="text" id='input'>
</body>
</html><script>let handle = function(val){/*逻辑体*/console.log(val);}function delayPrint(delay, callback){let timer = null;return function(value){/*注意点一：在返回该函数时无法确定的参数都要在这里接收而不是在父级形参中接收。例如在本例中，返回该函数时无法确定keyup的值，所以在这里要接收。*/if(timer){clearInterval(timer);}timer = setTimeout(function(){callback(value) /*注意点二：这里是function(){callback(val)}，而不是直接放callback(val)，直接放callback(val)是函数调用。*/},delay);}}let func = delayPrint(1000, handle);document.getElementById('input').addEventListener('keyup',function(e){//console.log(e.target.value);let val = e.target.value;func(val)})
</script>

最终效果：

五：分析

防抖函数本质上是函数闭包的典型应用。利用闭包的特点，将变量常驻内存，实现闭包的函数访问的变量是上次函数运行的值。从而清除定时器任务

JS防抖函数实现及应用相关推荐

JavaScript防抖功能（js防抖函数，防抖功能的应用与解析，手把手教学）
简述:js的防抖功能大家都比较熟悉,这里重新给大家详细的介绍一下js防抖函数的解析与应用.防抖就是某一高频事件不断被触发时,仅在最后一次真正执行事件处理代码,将多次执行变为最后一次执行,具体点就是我们 ...
面试必问题：JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
js 防抖是什么 JavaScript防抖怎么用
JS防抖其实也是用来提升网页性能的一种技术写法防抖就是指当用户触发某个操作时,如果在指定的时间内再次触发该操作,那么就清除前面触发的操作,直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请 ...
防抖函数：多次触发后只执行第一次或者最后一次的函数
一. 应用场景当前问题: 现在点击一个按钮,然后会向服务器请求一次数据.如果暴力操作,不断的点击按钮,那么就会一直向服务器请求,这样肯定不好,需要应用到防抖函数. 最终目的:多次触发只执行最后一次或 ...
2019 面试准备 - JS 防抖与节流 (超级重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址本文涉及知识点: 防抖与节流重绘与回流浏览器解析 URL DNS 域名解析 ...
vue自定义指令之防抖函数
在项目中会遭遇到用户连续点击多次按钮的情况, 这个时候就需要使用防抖函数,在一定时间内只触发一次函数执行. 实现在 Vue 项目中,在 src > utils 目录下新建 Debounce.j ...
js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行
刚学习防抖/节流的时候就一直有一个疑问:为啥addEventListener调用防抖函数可以,但是我再HTML里写onClick方法就不行呢?百思不得其解,后来还是屈服了,用了addEventList ...
自定义防抖函数五步应对复杂需求
防抖定义某些频繁操作的事件会影响性能,"防抖"可以用来减少事件的响应频次,当事件触发的时候,相对应的函数并不会立即触发,而是会进行等待,只有等待了一段时间之后,事件停止触发,此时 ...
Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...

JS防抖函数实现及应用