成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

隨手記 - 瘋狂觸發(fā)滾輪事件的Mac觸控板

RobinTang / 1039人閱讀

摘要：這個來的莫名其妙，問了一圈人也沒什么思路，后來自己上網(wǎng)搜，在一個頁面上找到一段關(guān)于的觸控板的手勢滑動會瘋狂觸發(fā)滾輪事件的記錄，但是輪到具體的解決方案就語焉不詳了。

頭幾天官網(wǎng)剛上線，就接到投訴說有問題。過去一看，我靠什么鬼？！Mac下用觸控板一滑到底，——首頁上用iscroll寫的翻頁效果直接全軍覆沒。

這個bug來的莫名其妙，問了一圈人也沒什么思路，后來自己上網(wǎng)搜，在一個頁面上找到一段關(guān)于Mac的觸控板的手勢滑動會瘋狂觸發(fā)滾輪事件的記錄，但是輪到具體的解決方案就語焉不詳了。沒轍，靠天沒用，還是靠自己吧~

這里先簡單介紹下。出問題的首頁用的是iscroll插件，用snap屬性做的整屏翻頁的效果，翻頁用鼠標(biāo)滾輪驅(qū)動，這塊用的是MDN上的一個滾輪事件的兼容代碼，回調(diào)使用iscroll的接口完成向上/向下翻頁的效果。

回到這個問題上。一開始我想用事件防抖解決，于是用setTimeout()自己寫了個：觸發(fā)事件后先進(jìn)入延時，延時后執(zhí)行函數(shù)；如果在延時內(nèi)仍有事件觸發(fā)，則取消原有的延時重新計時。

// 打底用的zepto.js，addWheelListener是滾輪事件的兼容插件，下同~
var wheelTimer = false;
var wheelSlide = function (e) {
    e.preventDefault();
    clearTimeout(timer);
    if (e.deltaY > 0) {
        wheelTimer = setTimeout(function(){
            iScroll.next();
        }, 100);
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        wheelTimer = setTimeout(function(){
            iScroll.prev();
        }, 100);
    }
}
addWheelListener($("body")[0], wheelSlide);

我本意是用延時抵消掉重復(fù)觸發(fā)的滾輪事件，最后合成一個事件觸發(fā)，沒想到測試之后，Mac上的問題并沒有解決。

于是我想，用事件防抖的思路處理應(yīng)該還是不對，即便是延遲時間較短，如果事件持續(xù)觸發(fā)的話肯定翻頁還是會被無限的延遲阻塞掉，至此我想換用事件節(jié)流再試試。在找資料的時候，意外發(fā)現(xiàn)了Underscore.js這個工具庫，里邊不僅有現(xiàn)成的節(jié)流和防抖（中文文檔里用的是“防反跳”）函數(shù)可以用，而且還支持鏈?zhǔn)秸{(diào)用，并且壓縮版本也才十幾k，正合我意。

說干就干，馬上用Underscore擼了個事件節(jié)流版的：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        iScroll.next();
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        iScroll.prev();
    }
}).throttle(400);//這里毫秒數(shù)用了400，大概相當(dāng)于一個短動畫的執(zhí)行時間
addWheelListener($("body")[0], wheelSlide);

鏈?zhǔn)綄懛瓷先ミ€挺不錯的！進(jìn)本機瀏覽器（PC）……嗯？為啥最后會跳一下？趕緊翻文檔，又加了個參數(shù)上去：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        iScroll.next();
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        iScroll.prev();
    }
}).throttle(400, {trailing: false});
addWheelListener($("body")[0], wheelSlide);

這回PC上倒是正常了，Mac也從一滑到底變成了有“段落感”的跳動，但結(jié)果還是不對……
一狠心把毫秒數(shù)改成了5000，結(jié)果呢：還、是、不、對、、、。。。
（//陷入循環(huán)懵逼狀態(tài)ing……）
痛定思痛，一定是文檔看的不夠多！于是又啃了一遍Underscore.js的文檔（雖然是翻譯的，囧……），發(fā)現(xiàn)防抖居然有個[immediate]參數(shù)，是可以優(yōu)先執(zhí)行的！大喜過望~接著擼：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        wScroll.next();
    } else if (e.deltaY < 0 && wScroll.currentPage.pageY != 0) {
        wScroll.prev();
    }
}).debounce(600, true);// 本來想改回400的，有點心虛所以又加了200……
addWheelListener($("body")[0], wheelSlide);

居然PC和Mac都能一頁頁的翻頁了有！沒！有！不過翻頁的動作還有點遲滯，于是果斷把毫秒數(shù)改小：400、200、100，……Bingo！

最終代碼：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        wScroll.next();
    } else if (e.deltaY < 0 && wScroll.currentPage.pageY != 0) {
        wScroll.prev();
    }
}).debounce(50, true);
addWheelListener($("body")[0], wheelSlide);

總結(jié)：

Mac觸控板bug踩坑 +1；

理解了事件節(jié)流和事件防抖的概念；

Underscore.js真好用；

感謝git把每次的修改都記了下來。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81573.html

相關(guān)文章

  • WebVR開發(fā)教程——交互事件（二）使用Gamepad API

    摘要：返回的位置矩陣返回的方向矩陣返回軸每秒的角加速度返回軸每秒的角速度返回軸每秒的線性加速度返回軸的線性速度與只有的如和的只包含方向矩陣，因此為而為而的如和由于和兼具，因此和都為。 showImg(https://segmentfault.com/img/remote/1460000011814572?w=680&h=383);上期 WebVR開發(fā)教程——交互事件（一）頭顯與手柄 從頭顯和...

    pubdreamcc 評論0 收藏0

  • [譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流)

    摘要：譯通過實例講解和防抖與節(jié)流源碼中推薦的文章，為了學(xué)習(xí)英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術(shù)投稿。首次或立即你可能發(fā)現(xiàn)防抖事件在等待觸發(fā)事件執(zhí)行，直到事件都結(jié)束后它才執(zhí)行。 [譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流) lodash源碼中推薦的文章，為了學(xué)習(xí)（英語），翻譯了一下~ 原文鏈接 作者：DAVID CORBACHO 本文來自一位...

    Jenny_Tong 評論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術(shù)，都可以控制一個函數(shù)在一段時間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們在操作 DOM 事件的時候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評論0 收藏0

  • 把鼠標(biāo)、觸摸屏、觸控筆統(tǒng)一起來，Pointer Events介紹

    摘要：把事件統(tǒng)一起來處理用戶的輸入要用到事件。就這樣，提取了鼠標(biāo)觸摸屏觸控筆的共通之處，以方便開發(fā)跨設(shè)備的應(yīng)用。雖然是一個抽象，但它包含了鼠標(biāo)觸摸屏觸控筆的全部內(nèi)容。手指與觸摸屏的屏幕接觸著，認(rèn)定為。 跨設(shè)備的問題 平時我們在電腦上訪問的網(wǎng)頁，大部分情況下是用鼠標(biāo)來控制的。比如說鏈接跳轉(zhuǎn)，就是鼠標(biāo)指針移動到鏈接文字或圖片的位置，然后點擊一下。又比如說滾動屏幕，滑動一下鼠標(biāo)滾輪就可以。 如果是...

    FleyX 評論0 收藏0

  • 把鼠標(biāo)、觸摸屏、觸控筆統(tǒng)一起來，Pointer Events介紹

    摘要：把事件統(tǒng)一起來處理用戶的輸入要用到事件。就這樣，提取了鼠標(biāo)觸摸屏觸控筆的共通之處，以方便開發(fā)跨設(shè)備的應(yīng)用。雖然是一個抽象，但它包含了鼠標(biāo)觸摸屏觸控筆的全部內(nèi)容。手指與觸摸屏的屏幕接觸著，認(rèn)定為。 跨設(shè)備的問題 平時我們在電腦上訪問的網(wǎng)頁，大部分情況下是用鼠標(biāo)來控制的。比如說鏈接跳轉(zhuǎn)，就是鼠標(biāo)指針移動到鏈接文字或圖片的位置，然后點擊一下。又比如說滾動屏幕，滑動一下鼠標(biāo)滾輪就可以。 如果是...

    elarity 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<