Javascript的防抖和节流方法怎么用
Javascript的防抖和节流方法怎么用
本篇内容主要讲解“Javascript的防抖和节流方法怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Javascript的防抖和节流方法怎么用”吧!
1. 什么是防抖
【解释】:防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。
【图解】:
【作用】:
当用户频繁触发该事件的时候,确保只进行最后一次的请求操作,节约请求的资源
【实现输入框的防抖】:
vartimer=null//1.防抖动的timerfunctiondebounceSearch(keywords){//2.定义防抖的函数timer=setTimeout(function(){//发起JSONP请求getSuggestList(keywords)},500)}$('#ipt').on('keyup',function(){//3.在触发keyup事件时,立即清空timerclearTimeout(timer)//...省略其他代码debounceSearch(keywords)})
【实现建议框缓存】:
定义全局缓存对象
//缓存对象varcacheObj={}
将搜索结果保存到缓存对象中
//渲染建议列表functionrenderSuggestList(res){//...省略其他代码//将搜索的结果,添加到缓存对象中vark=$('#ipt').val().trim()cacheObj[k]=res}
优先从缓存中获取搜索建议
//监听文本框的keyup事件$('#ipt').on('keyup',function(){//...省略其他代码//优先从缓存中获取搜索建议if(cacheObj[keywords]){returnrenderSuggestList(cacheObj[keywords])}//获取搜索建议列表debounceSearch(keywords)})
2、什么是节流
【解释】:减少一段时间内事件的触发频率。也叫节流策略。
【图解】:
【应用】
鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源;
【鼠标跟随案例】:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><scriptsrc="./lib/jquery.js"></script><style>html,body{margin:0;padding:0;overflow:hidden;}#angel{position:absolute;}</style></head><body><imgsrc="./angel.gif"alt=""id="angel"/><script>$(function(){//获取图片元素varangel=$('#angel')//绑定鼠标移动事件$(document).on('mousemove',function(e){//获取鼠标到x和y轴的距离设置给图片的高和左$(angel).css('top',e.pageY-40+'px').css('left',e.pageX-40+'px')})})</script></body></html>
3、节流阀
【解释】:
节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作。
当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了。
每次执行操作前,必须先判断节流阀是否为空。
【使用节流优化】:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><scriptsrc="./lib/jquery.js"></script><style>html,body{margin:0;padding:0;overflow:hidden;}#angel{position:absolute;}</style></head><body><imgsrc="./angel.gif"alt=""id="angel"/><script>$(function(){//定义一个节流阀vartimer=null;//获取图片元素varangel=$('#angel')//绑定鼠标移动事件$(document).on('mousemove',function(e){//判断节流阀是否为空if(timer)return//控制节流阀的时间timer=setTimeout(function(){//获取鼠标到x和y轴的距离设置给图片的高和左$(angel).css('top',e.pageY-40+'px').css('left',e.pageX-40+'px')//清空节流阀timer=null},100)})})</script></body></html>
到此,相信大家对“Javascript的防抖和节流方法怎么用”有了更深的了解,不妨来实际操作一番吧!这里是恰卡编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能