概念解释

函数节流: 频繁触发,但只在特定的时间内才执行一次代码

函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

函数节流

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

以下是监听页面元素滚动的示例代码:

 // 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
} canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
// 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
// 如果空闲,则可以正常触发方法执行。
// 如果代码正在执行,则取消这次方法执行,直接return。

函数抖动

函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。

只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。

以下还是以页面元素滚动监听的例子,来进行解析:

 // 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
// 函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
// 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
// 如果计时完毕,没有方法进来访问触发,则执行代码。

js函数节流和函数防抖的更多相关文章

  1. 【javascript】js中的函数节流和函数防抖

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

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

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

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

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

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

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

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

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

  6. 函数节流throttle和防抖debounce

    throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...

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

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

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

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

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

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

  10. JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...

随机推荐

  1. hammerjs jquery的选项使用方法,以给swipe设置threshold和velocity为例

    先包含hammer.min.js和 jquery.hammer.js,然后: var $ele = $('#ele'); //复用jquerydom对象,建个变量 $ele.hammer().on(& ...

  2. Maven - StackOverflowError

    问题与分析 今天发现服务器上的Jenkins在集成项目时报错,报错原因如下: error compiling: java.lang.StackOverflowError -> [Help 1] ...

  3. VUE中模块与组件

    组件:我们项目中,每一个资源(.js,.css,.vue,...)都是一个模块,这些模块是相互独立,但是我们可以通过类似于webpack构建工具把它们整合在一起,你可以理解为模块就是一个一个积木,通过 ...

  4. ubuntu 16.04 单用户____修改忘记密码

    1.开机按ESC,出现如下界面,选中如下选项 2.按回车键进入如下界面,然后选中有recovery mode的选项 3.按e进入如下界面,找到图中红色框的recovery nomodeset并将其删掉 ...

  5. js json与字符串相互转换

    JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串

  6. Python随笔---深浅拷贝

    Python中为了避免某些方法的副作用(拷贝后有时更改原有数据),故存在有深浅拷贝的存在 浅拷贝导入copy方法集,使用copy_copy的方法进行 深拷贝一样导入copy方法集,使用copy_dee ...

  7. 064 Minimum Path Sum 最小路径和

    给定一个只含非负整数的 m x n 网格,找到一条从左上角到右下角的可以使数字之和最小的路径.注意: 每次只能向下或者向右移动一步.示例 1:[[1,3,1], [1,5,1], [4,2,1]]根据 ...

  8. Hbase region查找过程

    HBase的table是该region切分的,client操作一个row的时候,如何知道这个row对应的region是在哪台Region server上呢?这里有个region location过程. ...

  9. 【简记】HTML + CSS 的一些要点(不定时更新)

    1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...

  10. 关于Linux系统启动时出现UVD not responding, Trying to reset the vcpu问题的解决

    本人的老古董笔记本!不知道什么时候显卡烧坏了 每次启动Linux的时候就会出现错误,信息如下: UVD not responding, trying to reset the VCPU! 讲道理,显卡 ...