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. SharePoint列表模板（.stp）

    背景:在sharepoint中,我们经常使用SharePoint Designer定制列表的新建.编辑.查看页面,当我们在开发环境定制好了的时候,怎么才能将定制的列表移到正式环境.        实现 ...

  2. Excel文件导入导出（基于Nodejs、exceljs）

    Excel导入.导出是大多数项目的管理后台必备功能.几年来使用过多个该功能的实现包,最近一次开发该功能,突然发现一个人气极高(3000+)的包,这里记录一下使用方法. 大凡厉害的技术的文档咋一看都想字 ...

  3. 微信小程序轮播图组件 swiper，swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  4. selenium操作浏览器cookies

    package test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; imp ...

  5. mac电脑安装wxPython2.8.12.1不成功怎么办 , Could not find a version that satisfies the requirement 2.8.12.1

    目的:robotframe-ride用于接口测试 遇到的问题: 1.mac终端pip安装robotframework-ride后 pip install robotframework-ride (pi ...

  6. 递归函数 Vue ElementUI

    对树形菜单的递归操作,首先应该对树形菜单数据进行整理,优化成自己需要的类型 比如Vue + ElementUI的动态侧边栏数据 export function routerRoleToPretty ( ...

  7. 理解JS深拷贝

    前言: JS的拷贝(copy),之所以分为深浅两种形式,是因为JS变量的类型存在premitive(字面量)与reference(引用)两种区别.当然,大多数编程语言都存在这种特性. 众所周知,内存包 ...

  8. JDK8 BigDecimal API-创建BigDecimal源码浅析二

    第二篇,慢慢来 根据指数调整有效小数位数 // 上一篇由字符串创建BigDecimal代码中,有部分代码没有给出,这次补上 // 这个是当解析字符数组时存在有效指数时调整有小小数位数方法 privat ...

  9. Android Glide 加载图片

    0.借鉴文章地址:http://blog.csdn.net/zivensonice/article/details/51835802 和 http://www.cnblogs.com/zhaoyanj ...

  10. Beyond Compare相同文件为何显示差异

    原文地址: http://www.beyondcompare.cc/wenti/wenjian-chayi.html Beyond Compare是一款经典老牌且优秀的专业级文本比较工具,它可以很方便 ...