一、鼠标行为预测技术
(1)用户预测tab切换
二、备注
(1)模块化要点
1、立即执行函数有返回值的就执行,没有返回值的就不执行(因为你return了变量才接收的到)
① 没有返回值
window.onload = function () {
init();
}
function init() {
initMenu();
}
var initMenu = (function () {
return function () {
console.log(1)
}
})();
② 没有返回值
window.onload = function () {
init();
}
function init() {
initMenu();
}
var initMenu = (function () {
console.log(1)
});
③ 没有返回值时,两边只能有一个执行符号
window.onload = function () {
init();
}
function init() {
initMenu // 这里就不用()
}
var initMenu = (function () {
return 1;
})(); // 这里写了()
(2)Array.prototype.indexOf.call
第一个参数是新的this指向,第二个参数是indexOf的参数
(3)为什么鼠标移动到子菜单却没有隐藏?
mouseleave触发事件的范围包括这个父盒子里面的子元素
(4)两次清除定时器分别代表什么意思?
第一个判断是检查上一次的延时器是否还处于待执行函数的状态中,如果检测到t不是null,就说明计时器将待执行,然后就清除计时器,进行新的延迟。
注意:
1. t=null是清除计时器的标识,从内存上根除计时器
2. clearTimeout()只是清除待执行的函数(setInterval同理)
清除与没清除的区别:
(5)mousemove/up的清除
mousemove和mouseup一般都是需要清除的,一是占用内存,二是第二次使用的时候会受影响
(6)数组的最后一位
注意这里数组的最后一位一定要-1,不然的话就是undefined
(7)为什么会打印两个undefined?
因为鼠标刚移入的瞬间,数组一项都没有的时候打印就是undefined,所以为了避免这种情况,可以在后面写一个对象
(8)为什么第一次打印是true,第二次往后都是false?
因为鼠标刚移入menu的时候,mousePose数组里面还没有元素,curPos、lastPos都返回{x:0, y:0},两个点就重合了,也是在三角形内,所以你从哪里进去,都会返回true。
(9)鼠标有时候移出去了类没有清除
在延时器还在的延迟的期间,你的鼠标经过了sub再离开menu,这时的isInSub就是true了,所以当延时器里的函数开始执行的时候就会进入if语句,然后return掉,就不会执行下面的代码了。