澳门百老汇游戏 服务器常用软件

澳门百老汇游戏报道简单实现节流函数和防抖函数进程解析_澳门百老汇游戏官网资讯

 更新时间:2019年10月08日 11:59:08   作者:有梦想的咸鱼前端   我要议论
这篇文章主要介绍了简单实现节流函数和防抖函数进程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有肯定的参考学习价值,需要的朋友能够参考下

在日常开拓中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响扫瞄器性能,所以需要用到节流函数;实现赌场百家乐 在线娱乐号、姓名之类的的验证,往往我们只需要验证一次,这个时刻我们就需要用到防抖函数;但是网上的很多资料都是不够具体和便于了解。今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的了解,希望能帮助大家了解;

节流函数

顾名思义,就是节省流量节省内存性能的一种函数,能够了解为是一种性能优化方案;

举个例子:一个水龙头一直在滴水,可能一次性会滴很多水,但是我们想操纵它的频率 ,让它每1000毫秒滴一滴水,这个时刻我们就能够用到节流函数来进行操纵(简单能够了解为类似于周期性定时器)

js代码(可直接复制到编辑器上看效果):

//首先定义一个全局变量
var canRun = true;
//当扫瞄器窗口大小发生变化也就是重新计算窗口大小的时刻触发
window.onresize = function(){
// 取反,canRun为false的情况下
if(!canRun){
//直接return,后面的代码不执行
 return
}
//走到这来就是canRun为true的情况,然后进行赋值为false
canRun = false

//设置一个定时器进行轮询操作
setTimeout( function () {
//这是要做的事情
  console.log("函数节流")
//最后记得重新赋值true继续让他取反
  canRun = true
//每隔1000毫秒也就是1秒钟就执行一次

 }, 1000)
}

效果图如下:

防抖函数

防抖函数和节流函数很类似,但是稍有区别,防抖函数的定义是当事情触发完成之后再延迟触发,并且只触发一次;如果在触发完成之前再次触发,则会再次刷新延迟;简单了解为(如果事情不触发即不执行,并且只会执行一次,就是定时器最后走的那一次)

举个例子:假如有个弹簧,你一直往下按压只要你不松手就是不会弹出的,弹簧只有在你松手的那一瞬间才会弹出去;防抖函数也是如此,只要事情触发没有结束是不会执行的,只有在事情触发结束后延迟执行一次;

js代码(可直接复制到编辑器上看效果):

//定义方法即要做的事情
function fun(){
 console.log('onresize')
 
}
//定义事情触发要执行的方法,两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn,delay){
  //定义一个变量作为等会消除工具
    var handle;
  //这里用到了闭包,一个函数里面return另一个函数,变量相互签引导致渣滓回收机制不会销毁handle变量
    return function(){
      //在这里肯定要消除前面的定时器,然后创建一个新的定时器
      clearTimeout(handle) 
      //最后这个定时器只会执行一次也就是事情触发完成之后延迟500毫秒再触发(这里的变量赋值是跟定时器树立连接,进行地点赋值,肯定要重新赋值给handle 
     handle=setTimeout(function(){
       fn()
     },delay)
    }
    
   }
//给扫瞄器添加监听事情resize
window.addEventListener('resize', debounce(fun, 500));

效果图如下:

总结:

1.防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;

2.防抖函数只会执行一次,且是最后触发的那一次,而节流函数会纪律性的执行多次;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多撑腰澳门百老汇游戏。

  • 节流
  • 防抖
  • 函数

相关文章

  • js实现多行文本框统计剩余字数功能

    js实现多行文本框统计剩余字数功能

    本文主要介绍了js实现多行文本框统计剩余字数功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法

    多个jquery.datatable共存,checkbox全选异常的快速解决方法

    这篇文章主要介绍了多个jquery.datatable共存,checkbox全选异常的快速解决方法。需要的朋友能够过来参考下,希望对大家有所帮助
    2013-12-12
  • syntaxhighlighter 使用方法

    syntaxhighlighter 使用方法

    syntaxhighlighter 使用方法...
    2007-07-07
  • JavaScript实现修改伪类样式

    JavaScript实现修改伪类样式

    这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现进程,一起学闲牢考下吧。
    2017-11-11
  • Bootstrap框架结合jQuery仿百度换肤功能实例解析

    Bootstrap框架结合jQuery仿百度换肤功能实例解析

    这篇文章主要为大家详细介绍了Bootstrap框架结合jQuery仿百度换肤功能实处女星澳门巴黎人码解析,具有肯定的参考价值,感兴趣的小伙伴们能够参考一下
    2016-09-09
  • 使用JS hash制作单页Web应用的方法详解

    使用JS hash制作单页Web应用的方法详解

    这篇文章主要给大家介绍了通宝tbplay918如何使用JS hash制作单页Web应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或工作具有肯定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 浅谈javascript中this在事情中的应用

    浅谈javascript中this在事情中的应用

    这篇文章主要介绍了浅谈javascript中this在事情中的应用实例,非常有助于我们对this关键字的了解,这里推举给大家。
    2015-02-02
  • 禁止你的左键复制有用技术

    禁止你的左键复制有用技术

    左键复制对付一切人来说有好有坏,例如原创内容就不想被别人复制,接下来介绍一种方法,有需要的朋友能够参考下
    2013-01-01
  • 犀利的js 函数集合

    犀利的js 函数集合

    和同事讨论js时,我说较为理想的状态是,把js当一把好用的匕首,随手拿来,捅一刀子就走。话虽如此,但现实生活中大局部时刻的情况是不理想的。
    2009-06-06
  • 通宝tbplay918延迟加载JavaScript

    通宝tbplay918延迟加载JavaScript

    当一个网站有很多js代码要加载,js代码放置的身分在肯定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点,分享给大家
    2015-05-05

最新议论

微信 cc漫画网手机版客户端 投诉建议 在线工具
条评论