vue使用节流函数的踩坑实例指南
短信预约 -IT技能 免费直播动态提醒
前言
一个常见的业务场景，我们要在input搜索框输入结束后，发送相关请求，获取搜索数据。频繁的事件触发会导致接口请求过于频繁。所以需要我们对此加以限制，来禁止不必要的请求，以免资源的浪费~
举一个🌰 业务场景
概念：
关于防抖函数的介绍
关于addEventListener
使用示例：
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的
// interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖在vue中使用？
首先说一下之前的踩坑行为
下面的代码为简易版的一个场景
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的
// interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}错误的使用方式
<template>
<div class="search-view">
<div class="header">
<Search
class="search-box"
v-model='searchValue'
@input='getSearchResult'
placeholder='搜索想要的好物' />
<span @click="goBack" class="cancel">取消</span>
</div>
<div class="serach-view-content" />
</div>
</template>
<script>
import Search from './components/Search';
import debounce from './config';
export default {
name: 'SearchView',
components: {
Search
},
data() {
return {
searchValue: ''
};
},
methods: {
getSearchResult() {
debounce(function() {
console.log(this.searchValue);
})();
}
}
};
</script>为什么错误？
源码层级分析
vue模板编译 的解析事件
export const onRE = /^@|^v-on:/
export const dirRE = /^v-|^@|^:/
function processAttrs (el) {
const list = el.attrsList
let i, l, name, value, modifiers
for (i = 0, l = list.length; i < l; i++) {
name = list[i].name
value = list[i].value
if (dirRE.test(name)) {
// 解析修饰符
modifiers = parseModifiers(name)
if (modifiers) {
name = name.replace(modifierRE, '')
}
if (onRE.test(name)) { // v-on
name = name.replace(onRE, '')
addHandler(el, name, value, modifiers, false, warn)
}
}
}
}总结: 实例初始化阶段调用的初始化事件函数initEvents实际上初始化的是父组件在模板中使用v-on或@注册的监听子组件内触发的事件
vue的事件机制
Vue.prototype.$on = function(event, fn) {
const vm = this;
if (Array.isArray(event)) {
for (let i = 0; i < event.length; i++) {
this.$on(event[i], fn);
}
} else {
//这个_events属性就是用来作为当前实例的事件中心，所有绑定在这个实例上的事件都会存储在事件中心_events属性中。
(vm._events[event] || (vm._events[event] = [])).push(fn);
}
return vm;
};
Vue.prototype.$emit = function(event) {
const vm = this;
let cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
let args = toArray(arguments, 1);
for (let i = 0; i < cbs.length; i++) {
try {
cbs[i].apply(vm, args);
} catch (e) {
handleError(e, vm, `event handler for "${event}"`);
}
}
}
return vm;
};vue的initState中 调用了initMethods方法
initMethods中挂在methods方法到this上
for (const key in methods) {
if (process.env.NODE_ENV !== 'production') {
if (methods[key] == null) {
warn(
`Method "${key}" has an undefined value in the component definition. ` +
`Did you reference the function correctly?`,
vm
);
}
// 如果和props中某个属性名重名了 抛出异常
if (props && hasOwn(props, key)) {
warn(`Method "${key}" has already been defined as a prop.`, vm);
}
if (key in vm && isReserved(key)) {
warn(
`Method "${key}" conflicts with an existing Vue instance method. ` +
`Avoid defining component methods that start with _ or $.`
);
}
// 将method绑定到实例 vm上 这样我们就可以通过this.xxx 来访问了
// 同时如果在vue中 let m1 = this.xxx m1() this也指向vue
vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
}
划重点：
- 子组件$emit('input事件')
- 父组件接收事件
getSearchResult.apply(this, agrs)
<===> apply的调用可以写成下面的形式
this.getSearchResult(args)
// 进而变成这种执行
debounce(function() {
console.log(this.searchValue);
})();
// 这里的debounce 返回了一个函数 于是变成
(function (fn) {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的
// interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
})()
// 到这里 其实就变成了匿名函数的自执行
// 由于每次触发input都会返回一个新的匿名函数 生成一个新的函数执行栈 所以防抖失效~
那么应该如何调用
<template>
<div class="search-view">
<div class="header">
<Search
class="search-box"
v-model='searchValue'
@input='getSearchResult()'
placeholder='搜索想要的好物'
/>
<span
@click="goBack"
class="cancel">取消</span>
</div>
<div class="serach-view-content">
</div>
</div>
</template>
<script>
import debounce from 'lodash.debounce';
export default {
name: 'SearchView',
components: {
Search,
},
data() {
return {
searchValue: '',
};
},
methods: {
getSearchResult: debounce(function () {
console.log(this.searchValue);
}, 500),
},
};
</script>
分析执行过程
getSearchResult().apply(this, args)
<===> 忽略参数行为 只关注执行栈
let func = function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的
// interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
this.func(args)
<===>
子组件触发input的行为 返回的始终是一个同一个函数体 防抖成功
类比于文章开始时介绍的addEventListener
总结
到此这篇关于vue使用节流函数踩坑的文章就介绍到这了,更多相关vue节流函数踩坑内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
