問題描述：今天接到個之前沒處理過的需求偎肃，就是給網(wǎng)站的所有頁面做埋點结缚，在頁面離開的時候講此頁面的編碼和頁面中點擊了哪些按鈕的信息傳給后臺。
第一步：這個需求我首先要保證的是在確定在頁面離開的時候要綁定的事件软棺，經(jīng)過一通百度找到了兩個離開的事件：分別是onunload和onbeforeunload,首先講一下他們兩個的區(qū)別
1.onunload 是在瀏覽器已經(jīng)獲取到了下一個頁面的內容红竭，即將要替換當前頁面的時候。
2.onbeforeunload是在瀏覽器即將向瀏覽器請求下一個頁面的時候
onbeforeunload在onunload之前發(fā)生喘落，onunload是無法阻止頁面的更新和關閉的茵宪，而 onbeforeunload 可以做到。所以我選擇了onbeforeunload這個事件瘦棋。onbeforeunload有以下兩種使用方法：
1.window.onbeforeunload=function(){
? ? ? ? return '提示信息'//? 這時會出現(xiàn)一個確認框稀火，問你是否要離開，里面的內容就是你自己的提示信息
}
2.window.onbeforeunload=function(){
functionName（）// 在離開之前執(zhí)行我們想做的操作赌朋，執(zhí)行完成頁面才會離開
}
顯然我選擇了第二種方法
第二步：找到了事件鉤子凰狞，我們就該想辦法在離開之前掉接口了。我首先試了下ajax的jsonp (沒辦法老項目用的就是這些沛慢，框架還是jquery赡若，我也很委屈)。結果發(fā)現(xiàn) 狀態(tài)不是期望中的200团甲，而是canceled逾冬。。躺苦。說明接口并沒有成功發(fā)出頁面就跳轉了身腻，好的有一個坑出現(xiàn)了。（對了跟大家說個小技巧匹厘，谷歌的調試工具嘀趟，默認情況下在頁面跳轉的時候console和network 這兩欄都會刷洗沒法看到之前頁面的輸出與接口信息，但是谷歌都提供了相應的設置看下圖中的畫√的地方都有preserve選項）
之后又是一通百度愈诚，發(fā)現(xiàn)如果在這個地方用異步的ajax的話那瀏覽器在你掉接口之后不管你的接口是在waiting還是connecting還是已經(jīng)調用成功并返回了數(shù)據(jù)她按，瀏覽器都會直接跳到另一個頁面牛隅。跟據(jù)event loop的原理分析大概的原因就是因為你跳到了另一個頁面原來的event loop就會銷毀，那原來的異步隊列也就給銷毀了尤溜。所以請求就會被終止了倔叼。所以在這里我們就不能在用異步的ajax了，應該用同步的ajax（是不是很陌生宫莱。丈攒。。啊哈哈）
其實就是把async：true授霸；改成false就變成同步了巡验，這樣只有把這個請求執(zhí)行完了才會執(zhí)行$.ajax(){}這段代碼后面的內容。有點類似于es6中的await的意思碘耳。然后這里提醒下显设，這個坑解決的時候我又發(fā)現(xiàn)jsonp這種跨域方式，不支持同步辛辨，不過正常其他跨域方式（服務器代理捕捂，cros等）下用post或者get都是可以的（fetch沒試過還。斗搞。指攒。）這樣就完美解決了我的問題。
頭一次寫技術文章內容有點亂僻焚，接受批評討論允悦。估計這問題也不會有太多人看到···哈哈哈。自娛自樂吧虑啤。
歡迎交流微信：hellowzhenganlin
