vue中防抖动使用_浅析Vue 防抖与节流的使用

在一个电影项目中，我想在电影的列表中，保存下拉的当前位置，防止你切换页面后，再切换回当前的电影列表页，他就又回到电影的第一条数据。

这时候，我不想每次只要滑动一点，就保存当前位置，我想隔一段时间，保存一次，这时候，就可以使用防抖和节流。

概念

说白了， 防抖节流就是使用定时器 来实现我们的目的。

防抖(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) {