js防抖函数和节流函数使用场景和实现区别示例分析

本文实例讲述了js防抖函数和节流函数使用场景和实现区别。分享给大家供大家参考,具体如下:

开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scroll事件,input事件,而对应的事件处理函数也会被高频率调用,这时会增加浏览器负担,用户体验也不好,这也是防抖函数和节流函数存在的意义和使用场景。

函数防抖(debounce):

持续触发事件时,在设定时间段内没有被触发,才去调用事件处理函数,在设定时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件时间重新开始延时。

具体实现:

设计思路:在setTimeout中调用事件处理函数,如果在定时器触发函数执行之前又触发函数,清除定时器。

function debounce(fn, timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}

function printEvent(){
  console.log('1121212')
}

window.addEventListener('scroll',debounce(printEvent,1000),false)

节流函数(throttle)  throttle   ['θrɑt(ə)l]  油门;节气门;扼杀

当事件被持续触发时,在设定时间内只让事件处理函数触发一次。

定时器实现模式:定时器在延时时间执行过后,重置为null, 定时器为null时,重新设置定时器,如此循环

//节流函数
function throttle(fn, range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}

window.addEventListener('mousemove',throttle(printEvent,1000),false)

时间戳实现模式:初始化时获取时间,每次触发事件时再次获取时间,两次时间间隔等于或大于设定时间,执行事件,初始化时间重置为当前时间,如此循环。

//节流函数 时间戳模式
var throttle2 = function(func, delay) {
  var prev = Date.now();
  return function() {
    var context = this;
    var args = arguments;
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

也可以使用时间戳加定时器结合实现:

总结:

函数防抖:在无事件触发后的设定时间执行事件,将几次操作合并为一此操作进行。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。

比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • JS co 函数库的含义和用法实例总结

    本文实例讲述了JS co 函数库的含义和用法.分享给大家供大家参考,具体如下: 继续学习阮一峰老师异步编程四部曲之三:co co在很早之前就听超哥讲过,说在node编程中大量用到,源码很简单,但是想法很强大. 让我有空抓紧了解下,前一段时间弄离职的事情,跑来跑去累的够呛. 现在终于一切回归正常了,还在拼命的适应新公司的节奏.只能趁周末继续学习了. 好了,不瞎扯了,回归主题,前两篇文章我们分别学习了 Generator 函数和 Thunk 方式的自动执行. 今天我们接着上次的思路学习使用 co 工

  • JavaScript 节流函数 Throttle 详解

    在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发. 这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢.浏览器卡死等).所以通常来讲我们会给相应事件添加延迟执行的逻辑. 通

  • JS函数参数的传递与同名参数实例分析

    本文实例讲述了JS函数参数的传递与同名参数.分享给大家供大家参考,具体如下: 函数参数的传递 函数参数如果是原始类型值,传递方式是值传递.这意味着,在函数体内修改参数值,不会影响函数外部. var p = 2 function f(p) { p = 3 } f(p) p // 2 上面代码中,变量p是一个原始类型的值,传入函数f的方式是值传递,因此在函数内部,p的值是原始值的拷贝,无论怎么修改,都不会影响到原始值. 但是,如果函数参数是复合类型,传入函数的方式是引用的传递,也就是说,传入函数的是

  • JS Generator 函数的含义与用法实例总结

    本文实例讲述了JS Generator 函数的含义与用法.分享给大家供大家参考,具体如下: 读阮一峰老师<Generator 函数的含义与用法>总结 老师的文章通俗易懂,但是我个人理解上面有一些差,所以看了几遍之后才有呢么一点点体会 把它记录下来. 还是那句话,所有事物的出现都是为了解决对应的问题. 那么Generator出现是为了解决什么问题的呢? 在异步编程的场景下,如果有多个异步任务,如何处理他们的先后执行顺序? 举一个常见的例子,jquery的ajax请求,每一个success都是一个

  • 详解JavaScript节流函数中的Throttle

    首先我们来了解下什么是Throttle 1. 定义 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出. 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期. 接口定义: * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay * @param delay {number} 延迟时间,单位毫秒 * @param action {function} 请求关联函数,实际应用需要调用的函数 *

  • js函数柯里化的方法和作用实例分析

    本文实例讲述了js函数柯里化的方法和作用.分享给大家供大家参考,具体如下: 函数柯里化的方法: 1,利用数组的reduce方法可实现柯里化,具体参见我的另外一篇文章 2,代码如下 const curry = (fn, ...args) =>{ console.log('args',args) // console.log(fn.length,args.length) return args.length < fn.length // 参数长度不足时,重新柯里化该函数,等待接受新参数 ? (..

  • javascript防抖函数debounce详解

    定义及解读 防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次.假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时. 举一个小例子:假定在做公交车时,司机需等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时,重新等待 1 分钟再关门,如果后续 1 分钟内都没有乘客上车,司机会认为乘客都上来了,将关门发车. 此

  • JS Thunk 函数的含义和用法实例总结

    本文实例讲述了JS Thunk 函数的含义和用法.分享给大家供大家参考,具体如下: 前面我们已经学习过了Generator 函数的优势和使用场景. 这篇文章我们继续学习阮老师的第二篇文章,Thunk 函数的含义和用法 说实话,在这之前是没听过这个词的,但其实如果你对犀牛书里的不完全函数有认真看过的话 理解起来也不是很费劲. 首先什么是 thunk 函数? 很多场景下我们都会陷入一个问题,就是函数参数的求值时间. 是函数调用时即求值还是在函数内使用时才求值? var x = 1; function

  • JS函数本身的作用域实例分析

    本文实例讲述了JS函数本身的作用域.分享给大家供大家参考,具体如下: 函数本身也是一个值,也有自己的作用域.它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在作用域无关. var a = 1 var x = function() { console.log(a) } function f() { var a = 2 x() } f() 上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1,而不是2. 总之,函数执行时所在的作用域

  • JS async 函数的含义和用法实例总结

    本文实例讲述了JS async 函数的含义和用法.分享给大家供大家参考,具体如下: 学习老师最后一篇文章并做总结, 前面我们认识了各种异步编程方式:回调函数,Promise对象,Generator函数, 再到两种自动执行方式:Thunk,co 好像我们为了更好的解决异步编程做了很多事情, 但是这也说明了一个问题 就是目前仍是的异步编程都有或多或少的问题,才导致我们要找对应的解决方案 今天我们仍是最后的大招:async 这个关键字在哪里见到来着? 我们可以给script标签添加 async 属性来

随机推荐

其他