vue防抖和节流是什么_前端节流和防抖的区别

2024-05-25 21:00:53

在监听某类事件时，如监听元素滚动或表单input事件时，处理函数在短时间内被频繁调用。
如果处理函数还需要调用后台接口，那么可能上次还没有响应，下一次请求又来了。这样无意中增加了服务器的压力，而且对用户来说，也会造成卡顿，这不是用户和程序员想要的。
节流和防抖大家应该都用过，但一点我不明白，节流和防抖都是延迟执行，那么它们的区别在哪里？

先看看节流的实现

// 节流
var canNext = true;
function throttle () {if(!canNext) {return;}canNext = false;setTimeout(function () {('节流方法执行了')canNext = true;}, 200)
};

canNext变量作为状态记录者，当它的值为 false 时，表示上一次调用正在执行，直接跳出本次调用，直到上一次的执行完毕，把true 赋给canNext,这时如果有调用，会执行这次调用。

下面我们再看看防抖的实现

// 防抖
var timer = null;
function debounce () {clearTimeout(timer);timer = setTimeout(function() {('防抖方法执行了')}, 200)
}

第一次 timer变量保存着这个定时器的标识符（用于关闭当前定时器），如果在200毫秒内调用多次，只会执行最后一次

在以匀速滚动时，两个方法执行结果如图

防抖

节流

大家应该看出区别了，虽然都是延时执行，但两个方法在执行次数上还是有区别。
节流为什么会出现多次执行？我们再看看代码

// 节流
var canNext = true;function throttle () {if(!canNext) {return;}canNext = false;setTimeout(function () {('节流方法执行了')canNext = true;}, 200)};

在密集调用时，节流方法相当于每200毫秒执行一次，再看看防抖。

// 防抖
var timer = null;
function debounce () {clearTimeout(timer);timer = setTimeout(function() {('防抖方法执行了')}, 200)
}

防抖方法在200以内调用，总是执行最后一次的调用，~~~~这下我总算明白了。

那么它们各自的使用场景有哪些呢？防抖

短信验证码
提交表单
resize 事件
input 事件（当然也可以用节流，实现实时关键字查找）

节流

scroll 事件，单位时间后计算一次滚动位置
input 事件（上面提到过）
播放事件，计算进度条

暂时只能想到这些，未尽之处,望大家指正。

vue防抖和节流是什么_前端节流和防抖的区别相关推荐

php是用于后端吗,后端技术_前端和PHP的有区别吗？－中国it教程网
前端和PHP的有区别吗? 前端和PHP的有区别,PHP主要用于后端处理数据和操作数据,增删改查,而Web前端所包括的HTML.JS.CSS等用于把界面和数据显示给用户,其次就是语法各不相同,运行的环境 ...
vue跳转到外部链接_前端实战项目：Vue.js实现外卖平台webapp,饿了么项目的翻版...
链接:https://github.com/ljianshu/mt-app 适合没有经验的朋友. 项目涉及到技术栈: vue全家桶:Vue.Vue-router.Vue-cli等组件化:单Vue文件 ...
vue 前端商城框架_前端工程师要掌握几个Vue框架
vue是一套用于构建用户界面的渐进式JavaScript框架,简单说Vue是类似于view的前端框架. vue开发核心是关注视图层,同时它更加容易与第三方库结合,再者我们在现有的项目中可以直接整合一起 ...
前端改变div排序_前端面试经常问到的问题
CSS 1.盒模型 2.flex 3.css单位 4.css选择器 5.bfc 清除浮动 6.层叠上下文 7.常见页面布局 8.响应式布局 9.css预处理,后处理 10.css3新特性 animat ...
前端面试题全面整理-带解析涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node...
来源 | https://www.html.cn/interview/13950.html 本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一 ...
css、js、浏览器、vue、react、移动web、前端性能、算法、node前端面试题
前端面试题全面整理-带解析涵盖(css.js.浏览器.vue.react.移动web.前端性能.算法.node) 前言上期整理了一些vue面试题,本期整理总结这些前端面试题,涵盖面很广,并且面的都 ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...
JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段前端技术 1.HTML.2.CSS. ...

最新文章

热门文章