标签:efault deb import rom 调用 设计模式 function 设计 开发
最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用。
本来上篇写的好好地,看起来逻辑也很清晰,但是实际用起来发现了一个巨大的坑。那就是,闭包中的变量将会共享!!!
// utils.js
export function runOnce(func) {
let runOnce = true;
return function(params) {
if (runOnce) {
func.apply(this, params);
runOnce = false;
}
};
}
上面的runOnce函数中的runOnce变量,将会被所有调用的函数共享。这就意味着,如果runOnce被用在多个地方,它也只会被执行一次。实例如下:
// utils.js
export function runOnce(func) {
let runOnce = true;
return function(params) {
if (runOnce) {
func.apply(this, params);
runOnce = false;
}
};
}
//example.vue
import { runOnce } from '@/utils';
<script>
export default {
methods: {
func1RunOnce: runOnce(function h() {
console.log('hello world1', this);
}),
func2RunOnce: runOnce(function h() {
console.log('hello world2', this);
}),
},
};
</script>
对于上面的例子,我们本意是让func1RunOnce和func2RunOnce各自执行一次,后面就不执行了。但是实际情况是,在func1RunOnce执行之后就把闭包中的runOnce赋值为false了,所以func2RunOnce其实一次也不会执行!!!
所以我们最终走进了一个死胡同,这条路走不通。(暂时不讨论闭包中的变量是一个字典的情况)
其实整个事件的起因,是模仿了throttle的用法:
//example.vue
import { throttle } from 'debounce-throttle';
<script>
export default {
methods: {
funcThrottle: throttle(function h() {
console.log('hello world1', this);
}, 300),
},
};
上面的funcThrottle函数,在300ms内只会执行一次。那么它为什么能够正常执行呢?
通过翻看源代码,我找出了如下原因:
标签:efault deb import rom 调用 设计模式 function 设计 开发
原文地址:https://www.cnblogs.com/yangzhou33/p/11210725.html