防抖和节流在vue中使用

2023-07-20 21:23| 来源: 网络整理| 查看: 265

防抖定义

频繁操作防止抖动，在操作后 n 秒内不操作，才触发事件，若继续操作，则重新计时

使用场景输入框输入缩放resize 代码 // utils.js // immediate 是否开始立即执行 function debounce(func, delay = 300, immediate = false) { let timer = null return function() { if (timer) { clearTimeout(timer) } if (immediate && !timer) { func.apply(this, arguments) } timer = setTimeout(() => { func.apply(this, arguments) }, delay) } } 复制代码在vue中使用

方法一：写在公共方法utils里引入

import { debounce } from 'utils' methods: { appSearch:debounce(function(e.target.value){ this.handleSearch(value) }, 1000), handleSearch(value) { console.log(value) } } 复制代码

方法二：写在当前vue文件中

data: () => { return { debounceInput: () => {} } }, methods: { showApp(value) { console.log('value', value) }, debounce(func, delay = 300, immediate = false) { let timer = null return function() { if (timer) { clearTimeout(timer) } if (immediate && !timer) { func.apply(this, arguments) } timer = setTimeout(() => { func.apply(this, arguments) }, delay) } } }, mounted() { this.debounceInput = this.debounce(this.showApp, 1000) }, 复制代码节流定义

频繁操作稀释函数执行，频繁操作时，每隔n秒才触发一次

使用场景鼠标点击，mousedown,mousemove单位时间只执行一次滚动事件，懒加载、滚动加载、加载更多或监听滚动条位置防止高频点击提交，防止表单重复提交代码 // utils.js function throttle (func, delay = 300) { let prev = 0 return function() { let now = Date.now() if ((now - prev) >= delay) { func.apply(this, arguments) prev = Date.now() } } } 复制代码在vue中使用

使用方法与防抖相同

【本文地址】

防抖和节流在vue中使用

防抖和节流在vue中使用

今日新闻

推荐新闻