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

场景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. 1、spring与springmvc父子容器

    转载于http://www.tianshouzhi.com/api/tutorials/spring 1.0 spring与springmvc父子容器 1.spring和springmvc父子容器概念 ...

  2. 计算机网络,HTTP - 头部中带X前缀的头部字段

    HTTP中,什么是"X-" Prefix header? 例如 github API 的response headers有很多X前缀的头部: 查一下MDN文档: Custom pr ...

  3. java多线程--死锁

    1. Java中导致死锁的原因 Java中死锁最简单的情况是,一个线程T1持有锁L1并且申请获得锁L2,而另一个线程T2持有锁L2并且申请获得锁L1,因为默认的锁申请操作都是阻塞的,所以线程T1和T2 ...

  4. Sobel边缘检测算法

    索贝尔算子(Sobel operator)主要用作边缘检测,在技术上,它是一离散性差分算子,用来运算图像亮度函数的灰度之近似值.在图像的任何一点使用此算子,将会产生对应的灰度矢量或是其法矢量 Sobe ...

  5. 「口胡题解」「CF965D」Single-use Stones

    目录 题目 口胡题解 题目 有许多的青蛙要过河,可惜的是,青蛙根本跳不过河,他们最远只能跳 \(L\) 单位长度,而河宽 \(W\) 单位长度. 在河面上有一些石头,距离 \(i\) 远的地方有 \( ...

  6. codeforces Codeforces Round #597 (Div. 2) D. Shichikuji and Power Grid

    #include<bits/stdc++.h> using namespace std ; int n; struct City { int id; long long x,y; //坐标 ...

  7. 开发笔记—钉钉服务商应用isv开发,从应用配置,到获取客户企业通讯录

    以第三方企业微应用为例 在第三方企业微应用应用时,比较底层的需求,就是应用需要获取客户企业的通讯录,即部门/员工的数据.本人整理以下几个关键数据,供大家开发参考. 新建第三方微应用时,能拿到这些初始数 ...

  8. Python的DataFrame遍历_转CSDN_J小白Y

    转CSDN_J小白Y:https://blog.csdn.net/Jarry_cm/article/details/99683788 1.DataFrame.iterrows() 返回{索引,Seri ...

  9. Go_Context

    如何通知子goroutine退出? 1. 使用全局变量 package main import ( "fmt" "sync" "time" ...

  10. opencv:图像轮廓计算

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...