JS——定时器切换选项卡，加事件监听

JMS_兔子

于 2022-09-04 20:57:44 发布

阅读量370

点赞数

分类专栏： js vue 前端文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/qq_43503450/article/details/126694372

版权

vue 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

23 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端应用中实现选项卡定时切换，并通过监听鼠标移动事件来控制切换过程。利用节流函数优化了事件处理，确保在鼠标移动后重新开始计时，提高用户体验。同时展示了具体的Vue.js实现代码，包括数据绑定、生命周期钩子和自定义方法。

摘要由CSDN通过智能技术生成

说明：选项卡定时切换，事件监听鼠标移动事件，移动后重新计时。

数据：

data(){
x: "", // 坐标
y: "",
count: 0, // 控制时长
switchTime: 0.1,
},

生命周期：

mounted() {
this.switch();
window.addEventListener("mousemove", this.mouse);
},

方法：

methods: {
switch() {
var card = this;
this.count++;
this.timer = setTimeout(function () {
if (card.count == card.switchTime * 100) {
card.isshowstep = true;
if (card.isactive < card.finacialAna_tabs.length - 1) {
card.isactive++;
card.fina_tabs_click(card.isactive); //调用切换方法
} else {
card.isactive = 0;
card.fina_tabs_click(card.isactive);
}
card.count = 0;
}
clearTimeout(card.timer);
return card.switch();
}, 1000);

// 节流调用

mouse: nowThrottle(function (e) {
var x1 = e.clientX;
var y1 = e.clientY;
if (this.x != x1 || this.y != y1) {
this.count = 0;
}
// console.log("鼠标滑动后", this.count);
this.x = x1;
this.y = y1;
}, 500),
}

节流文件

export const nowThrottle = (func, wait) => {
console.log("进入节流")
let timeout;
return function () {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}