欢迎来到站长教程网!
兔子CDN

Javascript/Ajax

当前位置:主页 > 网页制作 > Javascript/Ajax >

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

时间:2020-09-17|栏目:Javascript/Ajax|点击:

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

上一篇:javascript设计模式 – 装饰模式原理与应用实例分析

栏    目:Javascript/Ajax

下一篇:vue cli3适配所有端方案的实现

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

本文地址:www.dtcnnet.com/JavaScript/31955.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号