做一个英文网站_页面设计常用的字体颜色有_专业seo整站优化_seo长尾关键词排名

防抖源码及使用

  <button class="btn">点击发送消息</button><!-- 防抖：就是要延迟执行，你一直操作触发事件一直不执行处理函数，只有当你停止操作等待多少秒后才执行 --><script>function debounce(func, wait) {let timer = nullreturn function(...args) {if(timer) {clearInterval(timer)timer = null}timer =  setTimeout(() => {func.apply(this, args)}, wait)}}function sendMessage(name) {console.log(`${name}, i love you`)}const btn = document.querySelector('.btn')const sendMsgDebounce = debounce(sendMessage, 3000)btn.addEventListener('click', () => {sendMsgDebounce('lisi')})

节流源码及使用

方法一：时间戳

  <button class="btn">点击发送消息</button><script>// 节流：固定时间内只执行一次// 方法一：时间戳function throttle(func, wait) {let preTime = 0return function(...args) {if(new Date() - preTime > wait) {// 当 n 秒内不重复执行func.apply(this, args)preTime = new Date()}}}function sendMessage(name) {console.log(`${name}, i love you`)}const btn = document.querySelector('.btn')const sendMsgDebounce = throttle(sendMessage, 3000)btn.addEventListener('click', () => {sendMsgDebounce('lisi')})</script>

方法二：定时器

  <button class="btn">点击发送消息</button><script>// 节流：固定时间内只执行一次// 方法二：定时器function throttle(func, wait) {let timer = nullreturn function(...args) {if(!timer) {timer = setTimeout(() => {timer = nullfunc.apply(this, args)}, wait)}}}function sendMessage(name) {console.log(`${name}, i love you`)}const btn = document.querySelector('.btn')const sendMsgDebounce = throttle(sendMessage, 3000)btn.addEventListener('click', () => {sendMsgDebounce('lisi')})</script>