最近由於是大屏項目一直在使用vue遇到一個需求:就是長時間未操作鼠標就自動切換頁面展示。但是js中是沒有這個事件的,所以我們只能使用其他事件巧妙的轉化一下。我的鼠標停止事件就是利用一個mousemove實現的:
//初始化
var _this = this;
var diff = 3000,//未操作觸發間隔
firstTime = new Date().getTime(),
lastTime = new Date().getTime(),
indulge = false,//閥門
viewNub = 1;
//啓動
var switchTime = setInterval(anm, 5000);
//停止
$(document).on('mousemove', function () {
indulge = true;
clearInterval(switchTime);
firstTime = new Date().getTime();
console.log("moving");
});
//再啓動
setInterval(function () {
lastTime = new Date().getTime();
if (lastTime - firstTime > diff && indulge) {
indulge = false;
viewNub = $(".mid-top-menu li.active").index();//如果中途操作鼠標保存選中的下標,下次變化從次開始
switchTime = setInterval(anm, 5000);
}
}, 1000);
//自動動作
function anm() {
console.log("切換頁面");
}
思路是利用時間差來判斷是否超過設置閾值,超過則開始切換。