仿寫了一個簡單的廣告彈窗，主要功能就是頁面加載完畢時，右下角廣告彈出來，點了×，過一會又自己彈出來，樣式如下
完整代碼放在GitHub倉庫：https://github.com/HiJackLi/demo/
一、要點記錄
1.彈框運動需要幾個可供用戶配置的參數(shù)：運動距離(盒子高度決定)、運動時間、運動速度(運動步數(shù)決定)、等待重復出現(xiàn)時間
2.通過定時器setTimeout來進行每一幀的運動，并需要一個幀數(shù)記錄器來記錄彈框運動了幾次
3.當幀數(shù)記錄的數(shù)<運動總步數(shù)時，重復進行上面的運動，也就涉及遞歸了。
4.頁面初始化時運動是向上運動，點擊×是向下運動，等待一會出現(xiàn)是向上運動，所以有兩種運動函數(shù)，一個向上，一個向下。
5.每次運動結(jié)束要清除定時器，并且置為null，幀數(shù)記錄器也要歸零
6.點擊×需要上鎖，避免重復點擊?？梢酝ㄟ^定時器返回值timer==null來判斷是否進行下一步運動
二、反思問題
1.在獲取彈框的高度時用Element.style.height的方法是一大錯誤，因為這種方法獲取不到外部樣式，最后通過網(wǎng)上查找了解到了一個方法getComputedStyle()，這個能夠獲取完整的元素樣式表，唯一不足就是對屬性只讀不能寫，重新賦值操作還得Element.style
2.獲取元素的定位bottom時忘記使用parseFloat方法去掉單位
3.中間一直出問題，由于使用對象編程的方式，在定時器和遞歸中的this指向問題上被搞暈了。因為我用var self = this的方法來解決this指向問題，最后發(fā)現(xiàn)根本不行，由于遞歸很多次，這種方法只能解決一層。后面使用了bind才解決了，并且上網(wǎng)查了一下call和apply也不行，因為call和apply會立即執(zhí)行運動函數(shù)，不會等待定時器的計時，所以遞歸會進行，但是并沒有運動的跡象。而bind是返回一個新的函數(shù)等待被執(zhí)行。
4.加鎖思想一直思維定勢，總是想聲明一個變量來給個布爾值進行加鎖，其實可以根據(jù)情況判斷，比如這種案例可以用定時器的返回值是否為null來判斷，因為每次運動結(jié)束都要置為null，如果是在運動，那么點擊就不會重復添加事件。
