问题的由来:一些事件频繁的被触发而导致频繁的调用事件处理程序,从而造成程序不必要的开销,影响程序性能;防抖和节流就是为了解决这种情况造成的性能消耗。

场景1:使用keyup事件监听输入框的值进行请求搜索;此时我们只需要在用户输入搜索内容完成后再执行请求;此时使用 防抖

场景2:用户快速的时候点击切换轮播图的按钮;而我们需要轮播图是有规律的在间隔时间触发切换就好;此时使用 节流

相同点:

  都是使用setTimeout来实现;

主要是区别:

  防抖-debounce:触发某个事件规定n秒后执行事件处理程序,如果在这n秒内相同的事件被重复触发,则重新计算事件处理程序的执行时间点,即将多次触发合并为1次触发。

  节流-throttle:     保证事件处理程序在大于等于预定周期时必定被执行1次,即以固定周期执行函数,从而降低执行次数。

防抖(debounce)

防抖:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有触发最后一次。

(说个题外话就是英雄联盟中 ctrl+1 我的盖伦会跳舞,如果我按住ctrl再快速不停的按1,那么盖伦就会一直处于抽搐状态,当我最后一次按1不再继续按 他才会完整的跳完一支舞;即执行这个跳舞事件)

使用场景有:

  • 搜索框搜索输入。只需用户最后一次输入完,再发送请求
  • 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
// 获取滚动条位置 防抖
var timer = null;
window.onscroll = function() {
clearTimeout(timer);
timer = setTimeout(function(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   console.log('滚动条位置:' + scrollTop);
},200) };
//封装Debounce 参数 操作函数、时间间隔

//防抖函数封装
function bebounce(method,delay) {
  var timer = null;
  return function () {
    let that = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      method.apply(that,args) //当前this
    },delay)
  }
};
window.onscroll = bebounce(function() {
  console.log('我拖动了滚动条');
},200)

VUE中使用防抖:
data: {
  timeout2: null,
},
methods: {
  submit() {
  // clearTimeout(this.timeout2) //方法一
  // this.timeout2 = setTimeout(function(){console.log('点击')},600)
    this.debounce2(function(){console.log('点击')},600,"timeout2") //方法二 抽离
  },
  debounce2(func, wait, obj) {
    clearTimeout(this[obj])
    this[obj] = setTimeout(func, wait) //返回计时器 ID
  }
}

节流(throttle)

节流:保证事件处理程序在大于等于预定周期时必定被执行1次,即以固定周期执行函数,从而降低执行次数。

* 如果事件一直被触发,而我们实际上需要定时的执行事件处理程序,则去抖方式就不再合适,因为去抖只能保证执行连续触发事件的最后一次调用。

(继续,我鼠标快速的点击平A敌方防御塔,虽然我点的很快很快了,但是我的盖伦还是不慌不忙的一刀一刀有节奏的砍,这就是节流)

使用场景:

  • 高频点击切换轮播图
// 获取滚动条位置 节流
var state =true; //首次进入能执行
var timer = null;
window.onscroll = function() {
if (state) {
state = false;
clearTimeout(timer);
timer = setTimeout(function(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
state = true;
}, 500);
}
} //节流函数封装

function throttle(fun, delay) {
  let last, deferTimer
  return function (args) {
    let that = this;
    let _args = arguments;
    let now = +new Date();
    if (last && now < last + delay) {
      clearTimeout(deferTimer)
      deferTimer = setTimeout(function () {
      last = now
      fun.apply(that, _args)

      }, delay)
    }else {
      last = now
      fun.apply(that,_args)
    }
  }
};
window.onscroll = throttle(function() {
  console.log('我拖动了滚动条');
},200)

 

总结:

  • 函数防抖和函数节流都是防止某一时间频繁触发,但是这两者的原理稍有不同。
  • 函数防抖是连续的触发只执行最后一次(盖伦跳舞),而函数节流是间隔时间执行(盖伦A塔)。

JS-防抖与节流的更多相关文章

  1. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  2. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  3. 面试必问题:JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  4. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  5. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  6. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  7. 详谈js防抖和节流

    本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html ...

  8. JS 防抖和节流

    防抖和节流 在处理高频事件,类似于window的resize或者scorll,或者input输入校验等操作时.如果直接执行事件处理器,会增大浏览器的负担,严重的直接卡死,用户体验非常不好. 面对这种情 ...

  9. JS防抖和节流:原来如此简单

    一.函数防抖 前端开发工作中,我们经常在一个事件发生后执行某个操作,比如鼠标移动时打印一些东西: window.addEventListener("mousemove", ()=& ...

  10. js防抖与节流了解一下

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. js基础 之 引用类型

    引用类型的值(对象)是引用类型的一个实例.引用类型是一种数据结构,用于将数据和功能组织在一起 对象是某个特定引用类型的实例.新对象是使用new操作符后跟一个构造函数来创建的.构造函数本身就是一个函数, ...

  2. qq自己设定动态图像视屏

    类似于样但是是自己定义的视屏先上壁纸 这个具体是怎么制作的呢? 先从网络上下载自己喜欢的mp4视屏 qq头像上面点击拍摄动态图像 先随意拍摄2秒保持拍摄完成的状态不要点击确定 然后用手机文件夹找到你要 ...

  3. 0215 docker环境

    docker的下载安装和基本使用 我使用的mac,直接安装desktop. 然后命令行使用docker,关于desktop的使用,可以看官方文档. 安装好之后,确认一下是否可以运行,输入docker ...

  4. C++内存管理(new operator/operator new/operator delete/placement new)

    new operator 我们平时使用的new是new操作符(new operator),就像sizeof一样是语言内置的,不能改变它的含义,功能也是一样的 比如: string *ps = new ...

  5. 普及C组第三题(8.10)

    2301. [普及组T3或T4]线索 (File IO): input:assassin.in output:assassin.out 时间限制: 1000 ms  空间限制: 262144 KB 题 ...

  6. beego 使用连接mysql 报错 register db Ping `default1`, Error 1049: Unknown database 'test_beego' must have one register DataBase alias named `default`

    项目移植到另一台电脑后出现以下问题,及其解决方法: package models import ( "github.com/astaxie/beego/orm" _ "g ...

  7. 转:unittest的几种运行方式

    #unittest-test.py import unittestfrom demo import RunMainimport HtmlTestRunner class TestMethod(unit ...

  8. 转载:DRC

    https://cn.mathworks.com/help/audio/ug/dynamic-range-control.html?requestedDomain=cn.mathworks.com h ...

  9. 每天进步一点点------Allegro 蛇形走线

    对于高速数据总线,如果芯片内部没有延时调节功能,通常使用蛇形走线来调整延时以满足时序要求,也就是通常所说的等长线.蛇形走线的目的是调整延时,所以这一类网络都有延迟或相对延迟约束.所以在做蛇形走线调整时 ...

  10. UVA 1267 Network(DFS)

    题目链接:https://vjudge.net/problem/UVA-1267 首先我们要把这样一棵无根树转换成有根树,那么树根我们可以直接使用$VOD$. 还有一个性质:如果深度为$d$的一个节点 ...