Vue最新防抖方案(必看篇)
更新时间：2019年10月30日 14:51:05 作者：Vam的金豆之路
今天小编就为大家分享一篇Vue最新防抖方案(必看篇)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。举个栗子，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。举个栗子，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。
防抖实例：
<script>
const delay = (function () {
let timer = 0
return function (callback, ms) {
clearTimeout(timer)
timer = setTimeout(callback, ms)
}
})()
export default {
methods：{
fn() {
delay(() => {
//执行部分
}, 500)
}
}
}
</script>
节流实例：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
以上这篇Vue最新防抖方案(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue组件代码分块和懒加载讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
详解vue-cli+element-ui树形表格(多级表格折腾小计)
这篇文章主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
详解在vue-cli中使用graphql即vue-apollo的用法
这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue使用v-model封装el-pagination组件的全过程
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧2021-07-07
这篇文章主要介绍了Vue组件化的基本概念,包括什么是组件化、Vue的组件化思想以及如何在Vue中注册和使用组件,文章还详细讲解了如何进行父子组件之间的通信,包括父组件传递数据给子组件和子组件通过自定义事件将数据传递给父组件,文章最后通过一个综合练习来巩固所学知识2025-02-02
v-model 是Vue.js中的一个重要指令,通过它我们可以轻松实现数据的双向绑定,本文介绍一些常用的 v-model 绑定修饰符,并解析它们的实现原理,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了Vue入口文件index.html缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了在Vue项目中使用d3.js的实例代码，非常不错，具有参考借鉴价值价值,需要的朋友可以参考下2018-05-05
Vue + Webpack + Vue-loader学习教程之功能介绍篇
这篇文章主要介绍了关于Vue + Webpack + Vue-loader功能介绍的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
最新评论