js原生

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

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

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

函数防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下面这段代码，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

一个防抖的例子

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Title</title>
　　　　<style>
　　　　　　body{
　　　　　　　　height: 5000px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<script>
　　　　　　//防抖函数、fn（处理函数），wait（自定义定时器时间）
　　　　　　function debounce(fn, wait) { 
　　　　　　　　var timeout = ""; //声明变量timeout复制为空字符串
　　　　　　　　return function() {//返回匿名函数
　　　　　　　　　　if(timeout !== ""){//如果timeout不为空
　　　　　　　　　　　　clearTimeout(timeout);//清除timeout定时器
　　　　　　　　　　}
　　　　　　　　　　timeout = setTimeout(fn, wait);//重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器
　　　　　　　　}
　　　　　　}
　　　　　　// 处理函数
　　　　　　function handle() {
　　　　　　　　console.log(Math.random());
　　　　　　}
　　　　　　// 滚动事件
　　　　　　window.addEventListener('scroll', debounce(handle, 1000));//为window的scroll滑动事件绑定防抖函数
　　　　</script>
　　</body>
</html>

代码执行路线是：

  • 1、页面初始化，渲染页面，执行代码
  • 2、调用debounce函数，声明一个变量timeout，并赋值为空字符串。返回一个匿名函数，通过addEventListener绑定给window的scroll（滑动事件）
  • 3、触发window的scroll（滑动事件）
  • 4、进入window的scroll的处理函数（调用debounce函数返回的那个匿名函数）。
  • 5.1、如果timeout不为空，清除timeout定时器，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
  • 5.2、如果timeout为空，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
  • 6、再次触发window的scroll（滑动事件），重复步骤4和步骤5
  • 7、停止触发，执行一遍步骤4和步骤5
  • 8、执行timeout一次性定时器，调用handle函数进行处理

函数节流------》时间戳

var throttle = function(func, delay) {

　　var prev = Date.now(); //生成初始时间

　　return function() {

　　　　var context = this; //存储当前this指向---可删除

　　　　var args = arguments; //存储当前局部变量---可删除

　　　　var now = Date.now(); //存储当前执行时间

　　　　if (now - prev >= delay) { //使用当前执行时间减去初始时间

　　　　　　func.apply(context, args); //通过apply使用当前对象调用func函数------如果想删除var context = this;var args = arguments;需要把当前代码改成func()

　　　　　　prev = Date.now(); //再次刷新初始时间

　　　　}

　　}

}

function handle() {

　　console.log(Math.random());

}

window.addEventListener('scroll', throttle(handle, 1000));

时间戳的一个优点：在页面初始化的时候就生成了“初始时间”（不明白初始时间上面有提示），而此时还没有触发scroll时间，等触发时远远超过了时间间隔（假设时间间隔为1秒），所以处理函数会立即执行

时间戳的一个缺点：假设触发事件的间隔是一秒，在距离上一次触发事件的时间还差0.5秒停止触发事件，那一秒过后事件函数也不会执行；

函数节流------》定时器

var throttle = function(func, delay) {
　　var timer = "";
　　return function() {
　　　　var context = this;
　　　　var args = arguments;
　　　　if (!timer) {
　　　　　　timer = setTimeout(function() {
　　　　　　　　func.apply(context, args);
　　　　　　　　timer = "";
　　　　　　}, delay);
　　　　}
　　}
}
function handle() {
　　console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
 
定时器的优缺点与时间戳相反，当时发事件后1秒钟，执行处理函数，在事件间隔内出发时间，等超过时间间隔会再次执行处理函数
 

函数节流------》定时器+时间戳

 
所以我们就把事件戳的有点和定时器的有点结合起来，变成下面的方案
var throttle = function(func, delay) {
　　var timer = "";
　　var startTime = Date.now();
　　return function() {
　　　　var curTime = Date.now();
　　　　var remaining = delay - (curTime - startTime);
　　　　var context = this;
　　　　var args = arguments;
　　　　clearTimeout(timer);
　　　　if (remaining <= 0) {
　　　　　　func.apply(context, args);
　　　　　　startTime = Date.now();
　　　　} else {
　　　　　　timer = setTimeout(func, remaining);
　　　　}
　　}
}
function handle() {
　　console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
 

----------------------VUE-----------------------------

// 防抖
export function _debounce(fn, delay) {

　　var delay = delay || 200;

　　var timer = "";
　　return function () {
　　　　var th = this;
　　　　var args = arguments;
　　　　if (timer) {
　　　　　　clearTimeout(timer);
　　　　}
　　　　timer = setTimeout(function () {
　　　　　　timer ="" ;
　　　　　　fn.apply(th, args);
　　　　}, delay);
　　};
}
// 节流
export function _throttle(fn, interval) {
　　var last = new Date().getTime();
　　var timer;
　　var interval = interval || 200;
　　return function () {
　　　　var th = this;
　　　　var args = arguments;
　　　　var now = new Date().getTime();
　　　　if (last && now - last < interval) {
　　　　　　clearTimeout(timer);
　　　　　　timer = setTimeout(function () {
　　　　　　　　last = new Date().getTime();
　　　　　　　　fn.apply(th, args);
　　　　　　}, interval);
　　　　} else {
　　　　　　last = new Date().getTime();
　　　　　　fn.apply(th, args);
　　　　}
　　}
}

在需要使用的组件引用

import { _debounce } from "@/utils/public";

在 methods 中使用

methods: {
　　// 改变场数
　　changefield: _debounce(function(_type, index, item) {
　　　　// do something ...
　　}, 200)
}

VUE防抖节流：https://blog.csdn.net/qq_39759115/article/details/82287517
JS防抖节流参考文章：https://blog.csdn.net/qq_41000891/article/details/82733532

 
希望能看懂。。。。。。嘿嘿

Javascript的防抖和节流、VUE的防抖和节流的更多相关文章

  1. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  2. vue函数防抖和节流

    Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v ...

  3. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  4. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]

    一.概念 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题:像这类事件一般像 scroll keyup ...

  6. js函数节流和函数防抖

    概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...

  7. 函数节流throttle和防抖debounce

    throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...

  8. javaScript函数节流与函数防抖

    javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...

  9. 函数节流和函数防抖JavaScript实现

    函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...

随机推荐

  1. 对不可描述的软件安装sfbo插件

    0 后来...突然有一天,我就需要sfbo了. 1 安装 yum search "不可描述插件"是空的,只能用源码安装. 官方信息可以链接到这里,obfs. 1.1 编译安装 gi ...

  2. mysql视图、存储过程等

    视图: 需求: 创建的临时表(select * from tb1)被反复使用,这时可以为该临时表创建视图.视图相当于为某个查询创建了别名. 1.创建视图 create view v1 as selec ...

  3. oracle更具uuid排序后进行分页

    oracle查询分页.一个demo,可以借用. select a.unid from ( select t.unid,rownum rowno from DEV_REG_CFG_CAMERA t wh ...

  4. datetime 计算时间差

    计算时间差: .date()       # 格式化 .timedelta()         # 时间差 import datetime # 今天 today = datetime.datetime ...

  5. python numpy库的基本内容

    import numpy as np np.getfromtxt("路径",delimiter = "," ,dtype = str)  #读取txt文件数据 ...

  6. linux kettle

    https://blog.csdn.net/zzq900503/article/details/79110810

  7. 【菜鸟学Python】案例一：汇率换算

    汇率换算V1.0 案例描述: 设计一个汇率换算器程序,其功能是将外币换算成人民币,或者相反 案例分析: 分析问题:分析问题的计算部分: 确定问题:将问题划分为输入.处理及输出部分: 设计算法:计算部分 ...

  8. mipush ionic3 线上push

    <dict> <key>aps-environment</key> <string>production</string> </dic ...

  9. TypeError: Fetch argument 0.484375 has invalid type <class 'numpy.float32'>, must be a string or Tensor. (Can not convert a float32 into a Tensor or Operation.)

    报错: TypeError: Fetch argument 0.484375 has invalid type <class 'numpy.float32'>, must be a str ...

  10. locust压测websocket协议

    Locust是以HTTP为主要目标构建的. 但是,通过编写触发器request_success和 request_failure事件的自定义客户端,可以轻松扩展到任何基于请求/响应的系统的负载测试 . ...