JavaScript中防抖的示例分析

　　介绍

这篇文章给大家分享的是有关JavaScript中防抖的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JavaScript的特点

1. JavaScript主要用来向HTML页面添加交互行为。 　　2. javascript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。 　　3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。

<强>一、为什么需要防抖

<李>

高频的函数操作可能产生不好的影响

<李>

如:大小,滚动,mousedown, mousemove,弹起,keydown……

为此,我们举个示例代码来了解事件如何频繁的触发:

我们写一个索引。html文件:

& lt; html  lang=癳n"祝辞& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,,,& lt; title> Document 　　,,,& lt; title> debounce 　　,,,& lt; style> 　　,,,,,,,# wrapper  { 　　,,,,,,,,,,,宽度:,100%; 　　,,,,,,,,,,,身高:,200 px; 　　,,,,,,,,,,,行高:,200 px; 　　,,,,,,,,,,,text-align:,中心; 　　,,,,,,,,,,,颜色:,# fff; 　　,,,,,,,,,,,背景颜色:,# 444; 　　,,,,,,,,,,,字体大小:,30 px; 　　,,,,,,,} 　　,,,& lt;/style> & lt;/head> & lt; body> 　　,,,& lt; p  id=皐rapper"祝辞& lt;/p> 　　,,,& lt; script> 　　,,,,,,,var  count =, 1; 　　,,,,,,,var  op =, . getelementbyid (“wrapper"); 　　 　　,,,,,,,function  getUserAction (), { 　　,,,,,,,,,,,op.innerHTML =, + +, 　　,,,,,,,} 　　 　　,,,,,,,op.onmousemove =, getUserAction; 　　,,,& lt;/script> & lt;/body> & lt;/html>

从左边滑到右边就触发了近100次<代码> getUserAction 函数!看如下Gif:

JavaScript中防抖的示例分析

因为这个例子很简单,所以浏览器完全反应的过来,但假设:

<李>

它的触发频次极高,1分钟2000次,且涉及到大量的位置计算,DOM操作等工作,

<李>

存在接口请求,单个函数执行时间较长,但每个函数触发的间隔很近。

这种在一瞬间(短时间内)对浏览器或服务器造成了过多压力的交互就需要进行优化了,为了解决这个问题,一般有两种解决方案:

<李>

防反跳防抖

<李>

节流节流

他们的目的都是:<>强降低一个函数的触发频率,以提高性能或避免资源浪费。

<强>二、防抖的原理

今天重点讲讲防抖的实现。

防抖的原理就是:你尽管触发事件,但是我一定在事件触发<代码> n秒无操作后>

我们规定<代码> 3 s 为防抖的标准,那么:

<李>

第一次要求执行事件,此时倒计时3 s

<李>

倒计时2 s

<李>

倒计时1 s

<李>

0.5秒时事件再次被触发——此时倒计时3 s

<李>

…3 s内无事发生

<李>

执行事件,共用了5.5秒

<强>三,自己实现一个防抖

3.1第一版

我们根据上一节提到的核心思想,实现第一版代码:

function 防反跳(函数,,等),{ 　　,,,var 计时器; 　　,,,return  function  (), { 　　,,,,,,,clearTimeout(计时) 　　,,,,,,,timer =, setTimeout(函数,,等); 　　,,,}}

如果我们要使用它,第一节的例子为例:

op.onmousemove =,防反跳(getUserAction, 2000);

此时大家可以再次测试一下,事件持续发生时,只有在完全停止2 s后,才会触发事件:

写到这里,作为针对部分高频事件的需求来说,已经结束了。我们来看看他的效果:

JavaScript中防抖的示例分析

3.2第二版

大家都知道,dom节点在触发事件的时候,这指向它本身,本例中则指向<代码> op> var  count =, 1; var  op =, . getelementbyid (“op"); function  getUserAction (), { 　　,,,op.innerHTML =, + +, 　　,,,console.log(& # 39;这个# 39;,,),,//,此时输出,窗口…}op.onmousemove =,防反跳(getUserAction, 2000); function 防反跳(函数,,等),{ 　　,,,var 计时器; 　　,,,return  function  (), { 　　,,,,,,,clearTimeout(计时) 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

JavaScript中防抖的示例分析