节流 优化网络请求
预设一个函数只有大于等于执行周期时才会执行该函数， 周期内调用该函数不执行 如同水滴积累够一定重量后才会落下
应用场景
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
