防抖与节流
防抖:前面的所有触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续的快速触发,只会执行一次
节流:在规定的间隔时间范围内不会重复的触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发
解决方案:使用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>