简介
最近在看Rxjs的文档,看到operator内debounceTime、throttleTime的两个方法,怪自己读书少,之前写防抖节流的时候一直想写个utils可能是因为理解不到位就一直没敢下手,今天既然发现了工具就记个笔记写下来以便日后少掉一点头发。
代码:
一、安装rxjs
npm install -S rxjs
npm install -S rxjs-compat
二、引用
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/throttleTime";
三、算了 全贴上吧
<template>
<div class="container">
<button id="debounceTime">debounceTime</button>
<button id="throttleTime">throttleTime</button>
</div>
</template>
<script>
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/throttleTime";
export default {
data() {
return {
num: 1,
};
},
mounted() {
this.subButton();
},
methods: {
subButton() {
//订阅按钮点击+防抖
Observable.fromEvent(document.getElementById("debounceTime"), "click")
.debounceTime(1000)
.subscribe(() => this.numchange("debounceTime"));
//订阅按钮点击+节流
Observable.fromEvent(document.getElementById("throttleTime"), "click")
.throttleTime(1000)
.subscribe(() => this.numchange("throttleTime"));
},
numchange(type) {
this.num += 1;
console.log(type, this.num);
},
},
};
</script>
<style lang="scss" scoped>
</style>