vue使用防抖节流(提交表单、实时搜索)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue使用防抖节流(提交表单、实时搜索),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1924字,纯文字阅读大概需要3分钟。
内容图文
1、封装防抖节流方法
deTh.js
/**
* 闭包函数
*
* 防抖:对于短时间内连续触发的事件(滚动事件、表单重复提交、页面resize事件,常见于需要做页面适配的时候),让某个时间期限内,事件处理函数只执行一次。
* 节流:对于短时间内大量触发同一事件(滚动事件、输入框实时搜索),那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效
*/
export default {
// 防抖
debounce: function (fn, delay) {
// 时间期限
var delay = delay || 200;
var timer;
// 闭包
return function () {
// 考虑作用域,上下文环境,apply需要用到this对象
var th = this;
// 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。
var args = arguments;
// 判断还在定时,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
// 执行方法
fn.apply(th, args);
}, delay);
};
},
// 节流 定时器 + 时间戳
throttle: function(func, delay) {
var timer = null
var startTime = Date.now()
return function() {
// 结束时间
var curTime = Date.now()
// 间隔时间 = 延迟的时间 - (结束时间戳 - 开始时间戳)
var interval = delay - (curTime - startTime)
var th = this
var args = arguments
clearTimeout(timer)
if(interval <= 0) {
// 证明可以触发了
func.apply(th, args)
// 重新计算开始时间
startTime = Date.now()
} else {
// 继续等待
timer = setTimeout(func, interval)
}
}
}
}
2、组件中引入
test.vue
import handleDt from "../plugin/deTh/deTh";
3、组件中使用(表单提交、实时搜索)
html
<div>
9、防抖
<button @click="handleDe">防抖(频繁提交表单)</button>
</div>
<div>
10、节流
<input type="text" @input="handleTh"/>
</div>
js
// 防抖(按钮点击)
handleDe: handleDt.debounce(() => {
console.log('不管你怎么点击,我只在2s后触发事件,2s内点击我也要等到2s后再触发事件')
}, 2000),
// 节流(请求数据的方法)
getData: handleDt.throttle(() => {
console.log('第一次请求马上触发,往后不管你怎么触发,我只在5s后请求,5s内触发我要重新计算时间的')
}, 5000),
// 输入框值改变触发
handleTh() {
this.getData()
},
逆风的方向,更适合飞翔!
内容总结
以上是互联网集市为您收集整理的vue使用防抖节流(提交表单、实时搜索)全部内容,希望文章能够帮你解决vue使用防抖节流(提交表单、实时搜索)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。