时间:2021-05-18
在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据。
这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一段时间,保存一次,这时候,就可以使用防抖和节流。
概念
说白了, 防抖节流就是使用定时器 来实现我们的目的。
防抖(debounce):
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
典型的案例就是输入框搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,则重新计时。
节流(throttle):
规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效。
典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只生效一次。
用法
防抖(debounce)
下拉列表,隔一段时间保存当前下拉位置。
我们可以在 mounted 钩子中实现我们的防抖:
// 防抖 定时器let timer;//list就是电影列表 ref="list" $el获取DOM元素this.$refs.list.$el.addEventListener("scroll", e => { console.log("---->",e.target.scrollTop) //不使用防抖 if (timer) { //清空timer clearTimeout(timer); } timer = setTimeout(() => { console.log(e.target.scrollTop) //使用防抖 //在sessionStorage中保存当前下拉位置 // sessionStorage.setItem("position", e.target.scrollTop); }, 75); //75mm为最佳});效果演示(隔一段时间保存当前位置):
加 ----> 为不使用防抖,没加的则使用防抖
输入框搜索隔段时间进行搜索请求:
<template> <div> <input type="text" @keyup="debounce" /> </div></template><script>//定义 timerlet timer;export default { methods: { debounce: function() { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { console.log("防抖..."); timer = undefined; }, 2000); } }};</script>节流(throttle)
在n秒内点击多次,只有一次生效。
<template> <div> <button @click="throttle">按钮</button> </div></template><script>//定义let timer, lastTime;export default { methods: { throttle: function() { let now = +new Date(); if (lastTime && lastTime - now < 200) { //在200ms内点击多次,只有一次生效 clearTimeout(timer); } timer = setTimeout(() => { console.log("点击..."); lastTime = +new Date(); }, 200); } }};</script>效果演示:
补充
当然,也可以对这两个方法进行封装,以便在多处使用。
/** * 函数防抖 (只执行最后一次点击) */export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = arguments; if(timer){ clearTimeout(timer); } timer = setTimeout(() => { timer = null; fn.apply(this, args); }, delay); }};/* * 函数节流 */export const Throttle = (fn, t) => { let last; let timer; let interval = t || 500; return function () { let args = arguments; let now = +new Date(); if (last && now - last < interval) { clearTimeout(timer); timer = setTimeout(() => { last = now; fn.apply(this, args); }, interval); } else { last = now; fn.apply(this, args); } }};总结
以上所述是小编给大家介绍的Vue 防抖与节流的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖1.节流函数throttle/
我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是根据防抖节流而实现的,至于用防抖还是节流根据自己需求。constdelay=(function
函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。防抖使用场景:表单输入框校验提交按钮避免重复提交节流使用场景:s
防抖和节流的区别是防抖即触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。节流即高频事件触发,但在n秒内只会执行一次,所以节流
前言上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询、scroller、onresize等场景;今天这篇我们来讲防抖函数的应用场景::