js对频繁触发事件的函数防抖和函数节流
来源:互联网 发布:淘宝内衣模特拍摄 编辑:程序博客网 时间:2024/04/30 14:17
1.场景
函数防抖:注册时邮箱的输入框,随着用户的输入,实时判断邮箱格式是否正确。此时,每一次的用户输入都触发邮箱格式检测事件,造成了浪费,于是设置两次输入之间的时间间隔大于800ms时(用户结束输入时),再执行检查邮箱格式。
const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;$("#email").on("keyup",checkEmail());function checkEmail(){ let timer=null; return function (){ clearTimeout(timer); timer=setTimeout(function(){ console.log('执行检查'); },800); }}当第一次输入事件触发,设置定时:在800ms之后执行检查。
假如只过了100ms,上次的定时还没执行,此时清除定时,重新定时800ms。
紧跟着又来了一次输入,上次定时依然没执行,再次清除定时,重新定时800ms。
...
直到最近一次的输入,后面没有紧邻的输入了,这最近一次的输入定时计时结束,终于执行了检查代码。
结果是:如果两次输入触发事件的时间间隔不足800ms的,不执行检查代码。 两次触发事件的时间间隔大于800ms了,则前面的执行检查。
这就是传说中的 函数防抖。
2.场景
函数节流:一个加载新闻的列表页,只要滚动到页面的最下面就继续加载一部分新闻出来,即滚动加载。这时,就要监听滚动事件,判断若滚动
到页面底部了,就执行加载新闻的代码。
$(window).scroll(loadMore()); function loadMore(){ var canRun=true; return function(){ if(!canRun){return;} canRun=false; setTimeout(function(){ console.log("执行滚动事件"); var docHeight=$(document).height(); var winHeight=$(window).innerHeight(); var scrollDistance=$(window).scrollTop(); if( docHeight - (winHeight+scrollDistance) <=100 ){ console.log('加载中...'); } canRun=true; },600); } }由于滚动事件非常频繁,稍微滚动一下就会触发许多次,如果频繁触发的滚动,每一次都去检查是否到页面底部了再次造成了浪费。
于是设置一个开关,一次只能有一个触发执行,并对执行设置计时一段时间再执行,执行完毕之后再解锁。这就是函数节流。
阅读全文
0 0
- js对频繁触发事件的函数防抖和函数节流
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- JS函数节流防抖
- 函数防抖和节流
- 函数的节流 & 防抖
- js函数防抖与函数节流
- 事件委托、函数节流及防抖
- 事件委托、函数节流及防抖
- 函数防抖和函数节流
- 频繁操作中的防抖和节流
- 函数节流 + 函数防抖
- js函数节流 函数去抖来解决多次触发事件的问题
- 函数节流与防抖的实现
- 函数节流和防抖动
- [Sencha Touch/ExtJS] (函数节流)阻止用户快速频繁点击,导致多次触发点击事件
- js resize、scroll函数节流与函数防抖
- 函数节流与防抖
- 函数防抖与节流
- Ruby方法
- 使用js同步文本框
- java8-lambda表达式
- 欢迎使用CSDN-markdown编辑器
- Linux(Centos )的网络内核参数优化来提高服务器并发处理能力
- js对频繁触发事件的函数防抖和函数节流
- this static final super关键字使用详解
- web项目导出excel表格
- TensorFlow读书笔记(一)
- Android kotlin 详解(4)
- PHP7扩展开发-调用自定义函数,使用可变参
- (6)birt笔记
- String类——练习(2)
- apt-get安装FFmpeg及利用FFmpeg命令行获取rtsp视频流