window.vm = new Vue({
el:'#app',
data:{
searchval:'',
activeTab:1,
},
created:function() {
},
methods:{
// tab按钮点击
tabBtn:function(curTab){
console.log('tab======')
this.activeTab = curTab;
this.getTabList(curTab);
},
// 请求数据
getTabList:base.throttle(function(curTab){
// 判断点击tab和当前tab相等时,再执行
if(curTab == this.activeTab){
console.log('getTabList执行',curTab,this.activeTab)
}
},1000,{leading:true,trailing:true}),
// 搜索
search:base.debounce(function(){
console.log(this.searchval)
},500),
// 触发一次
clickOnce:base.throttle(function(){
console.log('触发一次 - 3000ms节流')
},3000),
//触发多次 -- 回调函数需要写函数名称
clickRepeat:base.throttle(function clickRepeat(){
console.log('触发多次 - 1000ms节流');
setTimeout(()=>{
clickRepeat.cancel();
// arguments.callee.cancel();
},50)
},1000),
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document测试</title>
<!-- <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/flexible.js"></script> -->
<!-- <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/source/vconsole.v3_2_0.min.js"></script> -->
<!-- <script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
var vv = window.vv || {}
</script> -->
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
[v-cloak]{
display: none;
}
.box{
margin:20px;
/* border-bottom: 1px solid palevioletred; */
}
.title,.active{
color:red;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>
<!-- <div class="box">
<button v-for="n in 5" @click="test1(n)"> 普通按钮-节流</button>
</div>
<div class="box">
<button v-for="n in 5" @click="test1(n)"> 领取按钮-节流</button>
</div> -->
<div class="box">
<p>1、Tab 切换示例:</p>
<span v-for="n in 5" @click="tabBtn(n)" :class="{'active':n == activeTab}" style="padding: 0 20px;"> tab{{n}} </span>
</div>
<div class="box">
<p> 2、搜索-keyup- 500ms防抖</p>
<input type="text" v-model="searchval" @keyup="search"/>
</div>
<div class="box">
<p> 3、只触发一次- 3000ms节流</p>
<button @click="clickOnce"> 按钮</button>
</div>
<div class="box">
<p> 4、触发多次 - 1000ms节流 </p>
<button @click="clickRepeat"> 按钮</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/source/??vue-2.6.11.min.js,axios.min.js,vue-i18n-8.28.2.min.js"></script>
<script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/??vvlib/pic-cdn-cs.js,base.js,jsbridge_proxy_report.min.js,utils/report.js,vvlib/vv_kibana.min.js?v=123"></script>
</body>
</html>