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

admin管理员组

文章数量:1794759

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); }) } */ } })

本文标签： 如何使用函数Vuethrottle