vue中如何使用节流（throttle）函数

JavaScript 中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理，否则我们一般不会遇到跟性能相关的问题。但在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。如下列一些场景

window.onresize 事件。
mousemove 事件。
上传进度。

那么在Vue中怎么实现和使用一个节流函数呢,k看下面代码

    <div id="app"><button @click="handleClick">测试</button></div>

// 节流函数
function throttle (fn, interval) {var _self = fn, // 保存需要被延迟执行的函数引用timer, // 定时器firstTime = true; // 是否是第一次调用return function () {var args = arguments;_me = this;if (firstTime) { // 如果是第一次调用不需要延迟_self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向return firstTime = false;}if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成return false;}timer = setTimeout(function () { // 延迟一段时间执行clearTimeout(timer);timer = null;_self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向}, interval || 500);}
}
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {/*正确用法*/handleClick: throttle(function (event) {console.log('this:', this);console.log('触发', event);}, 1000),/*错误用法handleClick: function (event) {throttle(function () {console.log('this:', this);console.log('触发', event);})}*/}
})

vue中如何使用节流（throttle）函数相关推荐

Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
彻底明白VUE中的done参数和函数作用，不懂的请进来
最近在学习vue.js发现钩子函数这一块,有一个done函数,莫名奇妙难懂,网上翻遍了,整了3个多小时,才弄明白怎么回事. 所以特地写下一个超简单的示例供学习者理解参考.不多说,上代码:后面有图解 & ...
Vue中message.split().reverse().join()函数用法
1.split('') 把一个字符串分割成字符串数组把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串 2.reverse() 颠倒数组中元素的顺序只作用于数组,跟在split('')后 ...
vue中的created和mounted函数不生效（created和mounted不管用）？
原因(这里只提供解决思路,不提供方法): 1.keep-alive缓存问题导致(当使用keep-alive的时候,页面第一次进入时,钩子函数的触发顺序created -> mounted -&g ...
vue中使用pug语法调用函数传参 mixin
npm i -D pug pug-html-loader pug-plain-loadermodule.exports = {chainWebpack: config => {config.mo ...
vue 日期格式化返回指定个数月份_12、vue中日期格式化转换的函数
/** * format time depend on the offer timestamp or Date instance * @param {Number, Date } date 要转 ...
函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析
函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...
vue中的data为什么必须是一个函数
其实这个问题是js的问题,并非是vue的问题这和原型链的知识有关我们可以反向推一下,如果vue中的data是一个对象的话会发生什么现象举例:vue中的data是一个对象 function Com ...
Vue中的 h 函数
Vue中的 h 函数在了解 h 函数之前,我们需要先了解虚拟DOM, 什么是虚拟DOM? 虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构.D ...

vue中如何使用节流（throttle）函数

vue中如何使用节流（throttle）函数相关推荐

最新文章

热门文章