节流 防抖 技术

节流 防抖 技术节流优化网络请求预设一个函数只有大于等于执行周期时才会执行该函数 周期内调用该函数不执行如同水滴积累够一定重量后才会落下应用场景 1 连续点击按钮切需求为间隔请求例如页面的 刷新 按钮 2 上拉加载获取数据的 上拉加载 节流技术的实现原理获取 newDate 时间求的时间差来限制一定时间内只允许执行一次指定函数以此来达到限制网络请求

节流   优化网络请求

预设一个函数只有大于等于执行周期时才会执行该函数, 周期内调用该函数不执行 如同水滴积累够一定重量后才会落下

应用场景

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 数学建模:方差分析模型[通俗易懂]

    数学建模:方差分析模型[通俗易懂]数学建模:方差分析模型1.方差分析模型引入考虑的模型,它的自变量是只能取0,1两个值的示例变量。这种变量往往比较两个多个因素的某种效益存在与否。比如考试及格为0,不及格为1.方差分析的实质:假设检验问题一个复杂的事物,其中往往有许多因素互相制约又互相依存。方差分析的目的是通过数据分析找出对该事物有显著影响的因素,各因素之间的交互作用,以及显著影响因素的最佳水平等。方差分析是在可比较的数组中,把数据间的总的“变差”按各指定的变差来源进行分解的一种技术。对变差的度量,采用离差平方和。方差分析方法就

    2022年10月15日
    3
  • Eurake[通俗易懂]

    Eurake[通俗易懂]eureka-core模块包含了功能的核心实现:1.com.netflix.eureka.cluster-与peer节点复制(replication)相关的功能2.com.netflix.eureka.lease-即”租约”,用来控制注册信息的生命周期(添加、清除、续约)3.com.netflix.eureka.registry-存储、查询服务注册信息4.com.n…

    2022年6月13日
    42
  • Keras/Tensorflow+python+yolo3训练自己的数据集

    Keras/Tensorflow+python+yolo3训练自己的数据集代码:https://github.com/qqwweee/keras-yolo3修改yolov3.cfg文件:https://blog.csdn.net/lilai619/article/details/79695109本文介绍如何制作数据集、修改代码、不加载预权重从头跑自己的训练数据一、简单回顾一下yolo原理:   1、端到端,输入图像,一次性输出每个栅格预测的一种或多种物体   2、坐…

    2022年6月29日
    30
  • hexo latex 换行 多行公式 终极解决方案

    hexo latex 换行 多行公式 终极解决方案hexo的LaTeX可算把我给折腾死了。。。问题:多行公式无法显示(hexo-renderer-marked,mathjax)看到网上说是因为渲染引擎把\\渲染成\,然后才交给mathjax渲染公式都说把hexo-renderer-marked换成hexo-renderer-kramed,然后再node_modules/kramed/lib/rules/inline.js里修改escape项,照做了,确实解决了问题,但是却出现了新的问题:复杂公式显示错乱,遂放弃。又看到在node_modules/m

    2022年5月14日
    48
  • 全局路径规划:图搜索算法介绍4(RRT/RRT*)

    全局路径规划:图搜索算法介绍4(RRT/RRT*)本节介绍RRT/RRT*的算法:RRT的基本原理是:我们首先初始化我们的起点,接下来随机撒点,选出一个x_rand,在x_near和x_rand之间选择一个x_new,再在原有的已经存在的x中找到离这个点最近的点将这两个点连接起来,同时这个最近的点也会作为x_new的父节点。RRT算法的伪代码如下:对照着图,再看一次:首先我们随机生成一个点,x_rand然后再tree上面…

    2025年8月6日
    3
  • 关于转置卷积(反卷积)的理解[通俗易懂]

    关于转置卷积(反卷积)的理解[通俗易懂]本文地址:https://blog.csdn.net/isMarvellous/article/details/80087705,转载请注明出处。什么是转置卷积(反卷积)?转置卷积(TransposedConvolution)又称为反卷积(Deconvolution)。在PyTorch中可以使用torch.nn.ConvTranspose2d()来调用,在Caffe中也有对应的层deco…

    2022年6月21日
    28

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号