vue中使用防抖和截流

今天，在项目开发工程中需要使用防抖，下面跟大家分享下防抖和截流的基础知识，顺便分享一个踩到的坑。

一、防抖

直接上代码看的清楚：

/*** 防抖* @param {Function} fn* @param {Number} delay*/
export function _debounce(fn, delay = 200) {var timer;return function () {var args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(() => {timer = null;fn.apply(this, args);}, delay);};
}

防抖，就是在单位时间内执行最后一次，按需使用。

二、截流

也是直接上代码：

/*** 截流* @param {Function} fn* @param {Number} interval*/
export function _throttle(fn, interval = 200) {var last;return function () {var args = arguments;var now = +new Date();if (!last || now - last > interval) {last = now;fn.apply(this, args);}}
}

截流，就是在设置的单位时间内只执行第一次，按需使用。

想了解防抖截流更详细的介绍和方法请移步：http://t.csdn.cn/pcRhN

如何使用！！！！

将方法import到vue组件中，然后：

    init: _debounce(function (val) {// 逻辑操作}, 1000)

在这里我踩了一个坑，我认为在使用中用箭头函数this的指向会是vue实例，所以一开始我的使用方法：

    init: _debounce((val) => {// 这里this是undefined}, 1000)

产生的原因就是：箭头函数没有this，函数中的this指向所处的上下文中的this，而且使用bind、apply、call等方法没办法修改，在上面的防抖和截流的方法中用apply修改this的指向未成功，所以在调用的方法中this为undefined。

vue中使用防抖和截流相关推荐

Vue中使用防抖与截流
Vue中使用防抖与截流何为防抖/节流防抖(debounce) 节流(throttle) 页面使用使用场景何为防抖/节流首先先说说何为防抖与节流防抖(debounce) 防抖就是一段时间内会 ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...
vue中的防抖和节流
vue中的防抖和节流防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间. 使用场景:频繁触发.输入框搜索因为防抖的特性,一直执行最后一次的触发,所以可以用于鼠 ...
vue中的防抖函数写法
vue中的methods // 防抖方法debounce(func,delay){let timer=nullreturn function (...args) {timer && c ...
前端优化中的防抖与截流
1. 什么是防抖? 在事件触发后的指定时间之后,再去执行真正需要执行的函数,如果在该时间之内事件又被触发,则重新开始计时. 常见的应用场景: 1. 滚动事件触发: 2. 搜索框输入查询: 3. 表单验 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
vue中input如何实现防抖
防抖函数的原理: 只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次: 使用场景: 防抖函数一般是用于频繁触发事件,而我们只需要它触发一次 ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
JavaScript函数防抖与截流
一.在前端开发当中,有些交互事件,会频繁触发.这样会导致我们的页面渲染性能,如果频繁触发接口调用的话,会直接导致服务器性能的浪费. 例如:键盘事件 keyup作为测试 <ul>& ...

vue中使用防抖和截流

一、防抖

二、截流

vue中使用防抖和截流相关推荐

最新文章

热门文章