DOM-19【鼠标行为预测技术（下）】

一、鼠标行为预测技术

（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掉，就不会执行下面的代码了。