防抖与节流

防抖:前面的所有触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续的快速触发,只会执行一次

节流:在规定的间隔时间范围内不会重复的触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发

 

解决方案:使用lodash函数

防抖函数:

 

<script>
import _ from 'lodash'
export default {
    mounted(){
        let input = document.querySelector('input');
        input.oninput = _.debounce(function(){
            console.log("我在2s之后执行");
        },2000)//2s之后执行回调函数
    }
}
</script>

 

 

 

节流函数:

 

<template>
 <div>
    <h1>我是计数器<span id="num">0</span></h1>
    <button>点我加1</button>
 </div>

</template>

<script>
import _ from 'lodash'
export default {
    mounted(){
        
        let btn = document.querySelector('button');
        let count = document.getElementById("num");
        btn.onclick = _.throttle(function(){
            count.innerHTML++
        },2000)//2s内计数器只能加上1
        
    }
}
</script>

<style>

</style>

 

posted @ 2023-03-25 20:22  Mr_sven  阅读(12)  评论(0编辑  收藏  举报