节流 优化网络请求
预设一个函数只有大于等于执行周期时才会执行该函数, 周期内调用该函数不执行 如同水滴积累够一定重量后才会落下
应用场景
1 连续点击按钮 切 需求为 间隔请求 例如 页面的【刷新】按钮
2 上拉加载获取数据 的【上拉加载】
节流技术的实现原理 获取new Date() 时间 求的时间差 来限制一定时间内 只允许执行一次指定函数 以此来达到限制网络请求的需求
骨架函数如下
var ODiv = document.getElementsByTagName('div')[0] var obtn = document.getElementsByTagName('button')[0] function jieliu(handle,wait) { var lastTime = 0 return function() { var nowTime = new Date().getTime() if(nowTime - lastTime > 2000) { handle() lastTime = nowTime } } } function buy() { ODiv.innerText = parseInt(ODiv.innerText) + 1 } obtn.onclick = jieliu(buy,2000)
防抖技术 优化页面请求性能
在前端开发中有一部分用户频繁的触发事件执行、而对于dom操作 资源加载这一类消耗性能的操作 可能会造成页面卡顿,客户端奔溃现象。。。函数节流 函数防抖就是为解决这类问题而生的
防抖 : 就像是公交司机等人全部上车才会触发
使用场景 实时搜索 拖拽
函数骨架如下
// 防抖 var inp = document.getElementsByTagName('input')[0] var timer = null //防抖主函数 function fangdou(hand,laizy) { return function() { var _arg = arguments; var self = this clearTimeout(timer) timer = setTimeout(function() { hand.apply(self,_arg) },laizy) } } function ajax(e) { console.log(this.value); } //input事件执行的是防抖延迟后的函数 inp.oninput = fangdou(ajax,2000)
什么是图片的懒加载?
当图片进入浏览器的可视区域,才加载该图片。这样大大加快了对与图片较多的页面的加载熟虑。例如一些较大型网上商城,一个页面有很多的图片,如果不使用懒加载,用户进入网页的速度会相当慢,这样用户体验可能就没那么好了。
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/232572.html原文链接:https://javaforall.net
