亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

不常用卻很有妙用的事件及方法

gaara / 3535人閱讀

摘要：過(guò)早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯(cuò)過(guò)收集數(shù)據(jù)的機(jī)會(huì)。因?yàn)橛脩?hù)代理通常會(huì)忽略在卸載事件處理器中產(chǎn)生的異步。使用方法，將會(huì)使用戶(hù)代理在有機(jī)會(huì)時(shí)異步地向服務(wù)器發(fā)送數(shù)據(jù)，同時(shí)不會(huì)延遲頁(yè)面的卸載或影響下一導(dǎo)航的載入性能。

1 visibilitychange事件

觸發(fā)條件：瀏覽器標(biāo)簽頁(yè)被隱藏或顯示的時(shí)候會(huì)觸發(fā)visibilitychange事件.

使用場(chǎng)景：當(dāng)標(biāo)簽頁(yè)顯示或者隱藏時(shí)，觸發(fā)一些業(yè)務(wù)邏輯

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});
2 storage事件

觸發(fā)條件：使用localStorage or sessionStorage存儲(chǔ)或者修改某個(gè)本地存儲(chǔ)時(shí)

使用場(chǎng)景：標(biāo)簽頁(yè)間通信

// AB頁(yè)面同源
// 在A 頁(yè)面
window.addEventListener("storage", (e) => {console.log(e)})

// 在B 頁(yè)面，向120打個(gè)電話
localStorage.setItem("makeCall","120")

// 然后可以在A頁(yè)面間有輸出, 可以看出A頁(yè)面 收到了B頁(yè)面的通知
...key: "makeCall", oldValue: "119", newValue: "120", ...
3 beforeunload事件

觸發(fā)條件：當(dāng)頁(yè)面的資源將要卸載(及刷新或者關(guān)閉標(biāo)簽頁(yè)前). 當(dāng)頁(yè)面依然可見(jiàn)，并且該事件可以被取消只時(shí)

使用場(chǎng)景：關(guān)閉或者刷新頁(yè)面時(shí)彈窗確認(rèn)，關(guān)閉頁(yè)面時(shí)向后端發(fā)送報(bào)告等

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});
4 navigator.sendBeacon

這個(gè)方法主要用于滿(mǎn)足 統(tǒng)計(jì)和診斷代碼 的需要，這些代碼通常嘗試在卸載（unload）文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。過(guò)早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯(cuò)過(guò)收集數(shù)據(jù)的機(jī)會(huì)。然而， 對(duì)于開(kāi)發(fā)者來(lái)說(shuō)保證在文檔卸載期間發(fā)送數(shù)據(jù)一直是一個(gè)困難。因?yàn)橛脩?hù)代理通常會(huì)忽略在卸載事件處理器中產(chǎn)生的異步 XMLHttpRequest 。

使用 sendBeacon() 方法，將會(huì)使用戶(hù)代理在有機(jī)會(huì)時(shí)異步地向服務(wù)器發(fā)送數(shù)據(jù)，同時(shí)不會(huì)延遲頁(yè)面的卸載或影響下一導(dǎo)航的載入性能。這就解決了提交分析數(shù)據(jù)時(shí)的所有的問(wèn)題：使它可靠，異步并且不會(huì)影響下一頁(yè)面的加載。此外，代碼實(shí)際上還要比其他技術(shù)簡(jiǎn)單！

注意：該方法在IE和safari沒(méi)有實(shí)現(xiàn)

使用場(chǎng)景：發(fā)送崩潰報(bào)告

window.addEventListener("unload", logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90527.html

相關(guān)文章

  • 不常用卻很有妙用的事件及方法

    摘要：過(guò)早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯(cuò)過(guò)收集數(shù)據(jù)的機(jī)會(huì)。因?yàn)橛脩?hù)代理通常會(huì)忽略在卸載事件處理器中產(chǎn)生的異步。使用方法，將會(huì)使用戶(hù)代理在有機(jī)會(huì)時(shí)異步地向服務(wù)器發(fā)送數(shù)據(jù)，同時(shí)不會(huì)延遲頁(yè)面的卸載或影響下一導(dǎo)航的載入性能。 1 visibilitychange事件 觸發(fā)條件：瀏覽器標(biāo)簽頁(yè)被隱藏或顯示的時(shí)候會(huì)觸發(fā)visibilitychange事件. 使用場(chǎng)景：當(dāng)標(biāo)簽頁(yè)顯示或者隱藏時(shí)，觸發(fā)一些業(yè)務(wù)邏輯 do...

    Richard_Gao 評(píng)論0 收藏0

  • 如何給列表降維？sum()函數(shù)的妙用

    摘要：上個(gè)月，學(xué)習(xí)群里的同學(xué)問(wèn)了個(gè)題目，大意可理解為列表降維，例子如下想得到結(jié)果原始數(shù)據(jù)是一個(gè)二維列表，目的是獲取該列表中所有元素的具體值。不經(jīng)意間，函數(shù)的注意事項(xiàng)，竟把其它的進(jìn)階內(nèi)容都聯(lián)系起來(lái)了。小小的函數(shù)，竟成為學(xué)習(xí)之路上的一個(gè)樞紐。 上個(gè)月，學(xué)習(xí)群里的 S 同學(xué)問(wèn)了個(gè)題目，大意可理解為列表降維 ，例子如下： oldlist = [[1, 2, 3], [4, 5]] # 想得到結(jié)果：...

    Channe 評(píng)論0 收藏0

  • 計(jì)算機(jī)視覺(jué)中的深度學(xué)習(xí)：技術(shù)、市場(chǎng)和5個(gè)你想不到的未來(lái)

    摘要：接下來(lái)，介紹了使用深度學(xué)習(xí)的計(jì)算機(jī)視覺(jué)系統(tǒng)在農(nóng)業(yè)零售業(yè)服裝量身定制廣告制造等產(chǎn)業(yè)中的應(yīng)用和趨勢(shì)，以及在這些產(chǎn)業(yè)中值得關(guān)注的企業(yè)。 嵌入式視覺(jué)聯(lián)盟主編Brian Dipert今天發(fā)布博文，介紹了2016年嵌入式視覺(jué)峰會(huì)（Embedded Vision Summit）中有關(guān)深度學(xué)習(xí)的內(nèi)容：谷歌工程師Pete Warden介紹如何利用TensorFlow框架，開(kāi)發(fā)為Google Translate...

    baukh789 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<