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. 多线程之Executors基本使用

    Executors几种创建方式 https://www.cnblogs.com/yasong/p/9318522.html 线程池数如何设置 https://blog.csdn.net/u013276 ...

  2. Windows下MongoDB设置用户、密码

    在默认情况下,mongod是监听在127.0.0.1之上的,任何客户端都可以直接连接27017,且没有认证. 好处是,用户可以即时上手,不用担心被一堆配置弄的心烦意乱. 坏处是,公网服务器搭建Mong ...

  3. 测试覆盖率工具EclEmma安装与使用

    此文来自于:https://www.cnblogs.com/cnsdhzzl/p/7638883.html EclEmma的简介 一个优秀的开源软件测试工具 eclipse的一个插件 能够对由 Jav ...

  4. vi命令插入

    1.插入 i :在当前光标前插入 I:在当前行的行首插入 a:在当前光标后插入 A:在当前行的行尾插入 o:在当前行的下面另起一行插入 O:在当前行的上面另起一行插入 s:删除当前光标的字符并开始插入 ...

  5. Keras RetinaNet github项目

    https://github.com/fizyr/keras-retinanet 根据此网站的方法,利用Pascal VOC 2007数据集开始训练,出现error: D:\JupyterWorkSp ...

  6. pandas处理时间序列（3）：重采样与频率转换

    五.重采样与频率转换 1. resample方法 rng = pd.date_range('1/3/2019',periods=1000,freq='D') rng 2. 降采样 (1)resampl ...

  7. linux----------linux下安装rar和unrar命令

    1.wget http://www.rarlab.com/rar/rarlinux-x64-4.2.0.tar.gz 2.tar xf rarlinux-x64-4.2.0.tar.gz    解压下 ...

  8. 设置和获取cookie

    通过make_response(“响应体”)创建response响应对象. 然后返回. 与直接return “响应体” 是一样的. 但是这里我们需要用到response响应对象,去设置cookie @ ...

  9. 微信公众平台开发教程（三）_OAuth2.0认证

    一.微信授权认证 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权的两种scope的区别说明 1.以snsapi_base为s ...

  10. CentOS 7 安装配置KVM 通过KVM安装CentOS系统

    搭建环境 : CentOS 7 [root@KVM ~]# systemctl stop firewalld [root@KVM ~]# systemctl disable firewalld [ro ...