Anti-shake (debounce)
The so-called anti-shake means that after triggering an event, events that are triggered very frequently are merged into one execution for execution. That is, the callback function is only executed once within the specified time. If the event is triggered again within the specified time, the execution time of the callback function will be calculated again based on this moment. In other words, if you click a button 10,000 times in rapid succession and it takes an hour, you will only execute one callback .
Create utils.js
// -防抖 所谓防抖，就是指触发事件后，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，
// 如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。
let timerDebounce = null
export const debounce = (fn, wait = 1000) => {
console.log('wait',wait);
if(timerDebounce) {
console.log('防抖状态');
clearTimeout(timerDebounce)
}
let callNow = !timerDebounce
timerDebounce = setTimeout(() => {
timerDebounce = null;
}, wait)
if(callNow){
console.log('===执行函数===',timerDebounce);
fn();//执行函数
}
}
Throttle
The so-called throttling means that when events are triggered frequently, event callbacks will only be executed within a specified time period. That is, the callback function will not be executed until the interval between triggering events is greater than or equal to the specified time. In other words, if you quickly click a button 10,000 times in an hour, 1 60 60*1000/wait callbacks will be executed .
Create utils.js
let timerThrottle = null
// -节流 所谓节流，是指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。
export const throttle = (fn, wait = 1000) => {
console.log('throttle',timerThrottle);
console.log('wait',wait);
if(timerThrottle != null){
console.log('节流状态');
return;
}else{
console.log('===执行函数===',timerThrottle);
fn();//执行函数
}
timerThrottle = setTimeout(() => {
console.log('节流结束',timerThrottle);
timerThrottle = null;
}, wait)
}
Use in the page
<template>
<view>
<view style="margin-top:80rpx;">
<view style="width:200rpx;">
<button
type="default"
@tap="buttonTap">防抖</button>
</view>
</view>
</view>
</template>
<script>
import {
debounce} from '@/common/js/utils.js'
export default {
data() {
return {
}
},
methods:{
buttonTap(){
debounce(()=>{
console.log('debounce，这里可执行你想要的接口请求等动作');
},3000)
}
}
}
</script>
<template>
<view>
<view style="margin-top:80rpx;">
<view style="height:2000px; width:750rpx; background-color: #006065;">
滚动页面试试节流~~
</view>
</view>
</view>
</template>
<script>
import {
throttle} from '@/common/js/utils.js'
export default {
data() {
return {
// 延时器对象
scrollTimer : null
}
},
methods:{
},
onPageScroll:function(e){
throttle(()=>{
console.log('throttle，这里可执行你想要的接口请求等动作');
},3000)
}
}
</script>
<style>
</style>