一、概念解释

 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。
 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。
 同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

二、函数节流

 函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。以下是监听页面元素滚动的示例代码:

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
} canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};

 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
 如果空闲,则可以正常触发方法执行。
 如果代码正在执行,则取消这次方法执行,直接return

 这个方法的作用是监听ID为throttle元素的滚动事件。
 当canRuntrue,则代表现在的滚动处理事件是空闲的,可以使用。
 通过关卡if(!canRun),等于就拿到了通行证。然后下一步的操作就是立马将关卡关上canRun=false。这样,其他请求执行滚动事件的方法,就被挡回去了。
 接着用setTimeout规定最小的时间间隔300,接着再执行setTimeout方法体里面的内容。
 最后,等setTimeout里面的方法都执行完毕,才释放关卡canRun=true,允许下一个访问者进来。

 这个函数节流的实现形式,需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的,也可以将canRun=true这一步放到callback中。理解了函数节流的关卡设置重点,其实改起来就简单多了。

三、函数防抖

 函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。以下还是以页面元素滚动监听的例子,来进行解析:

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};

 函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
 如果计时完毕,没有方法进来访问触发,则执行代码。

 这个方法的作用是监听ID为debounce元素的滚动事件
 进入滚动事件方法体的时候,做的第一件事就是清除上次未执行的setTimeout。而setTimeout的引用id由变量timer记录。
clearTimeout方法,允许传入无效的值。所以这里直接执行clearTimeout即可。
 然后,将需要执行的代码放入setTimeout中,再返回setTimeout引用给timer缓存。
 如果倒计时300ms以后,还没有新的方法触发滚动事件,则执行setTimeout中的代码。

 函数防抖的实现重点,就是巧用setTimeout做缓存池,而且可以轻易地清除待执行的代码。
 其实,用队列的方式也可以做到这种效果。这里就不深入了。

【javascript】js中的函数节流和函数防抖的更多相关文章

  1. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  2. javascript中的函数节流和函数去抖

    带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...

  3. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  4. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. javaScript函数节流与函数防抖

    javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...

  6. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  7. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  8. JavaScript 函数节流和函数去抖应用场景辨析

    概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...

  9. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

随机推荐

  1. Sqlserver 2008 R2安装的盘符空间不够用的解决办法

    例如我把一个sqlserver数据库安装在了D盘,结果发现D盘只剩下20G的可用空间,可是数据却每天的在增长,如何办?于是百度到了以下解决办法 方法很多: 1.可以给primary文件组添加文件.选择 ...

  2. 从头来之【iOS及历史版本特性介绍】

    iOS是apple公司的移动操作系统,在iPhone,iPad,iPod中应用,该名最初为Cisco的网络设备操作系统,后授权于Apple公司使用.下面介绍历史版本的特性. iOS1 最大特性是具有其 ...

  3. LeetCode Anagrams My solution

    Anagrams Given an array of strings, return all groups of strings that are anagrams. Note: All inputs ...

  4. php获取当前时间的方法

    1.获取当前时间 date('Y-m-d H:i:s', time())   2.字符串转时间 date('Y-m-d H:i:s',strtotime('2018-8-21 22:00:00'))

  5. ashx 一般处理程序中使用 Session

    项目中,调用 ashx 一般处理程序获取行政区划Json数据,在 ashx 里面有用到Session,但是总无法获取 Session . 查阅资料得知 ashx 一般处理程序要使用 Session,必 ...

  6. Maven进行Mahout编程,使其兼容Hadoop2.2.0环境运行 (转)

    http://blog.csdn.net/u010967382/article/details/39209329 http://blog.csdn.net/fansy1990/article/deta ...

  7. @Service注解的使用

    首先,在applicationContext.xml文件中加一行: <context:component-scan base-package="com.hzhi.clas"/ ...

  8. tomcat6url请求400错误(%2F与%5C)

    近期几天,开发接口时.tomcat报了400错误,查了下原因. 错误原因:url中參数部分包括/,默认tomcat是不支持url參数包括: /(%2F),\(%5C). 解析方法:能够通过加入配置Do ...

  9. java面试第二天

    局部变量:不是声明在类体括号里面的变量 (1)必须要先赋值,后使用,否则通不过编译,局部变量没有默认初始化值 (2)作用范围:定义开始到定义它的代码块结束 (3)同一范围内,不允许2个局部变量命名冲突 ...

  10. 写出3个使用this的典型应用

    (1).在html元素事件属性中使用,如: <input type=”button” onclick=”showInfo(this);” value=”点击一下” /> (2).构造函数 ...