在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
头几天官网刚上线，就接到投诉说有问题。过去一看，我靠什么鬼？！Mac下用触控板一滑到底，——首页上用iscroll写的翻页效果直接全军覆没。
这个bug来的莫名其妙，问了一圈人也没什么思路，后来自己上网搜，在一个页面上找到一段关于Mac的触控板的手势滑动会疯狂触发滚轮事件的记录，但是轮到具体的解决方案就语焉不详了。没辙，靠天没用，还是靠自己吧~
这里先简单介绍下。出问题的首页用的是iscroll插件，用snap属性做的整屏翻页的效果，翻页用鼠标滚轮驱动，这块用的是MDN上的一个滚轮事件的兼容代码，回调使用iscroll的接口完成向上/向下翻页的效果。
回到这个问题上。一开始我想用事件防抖解决，于是用setTimeout()自己写了个：触发事件后先进入延时，延时后执行函数；如果在延时内仍有事件触发，则取消原有的延时重新计时。
// 打底用的zepto.js，addWheelListener是滚轮事件的兼容插件，下同~
var wheelTimer =
var wheelSlide = function (e) {
e.preventDefault();
clearTimeout(timer);
if (e.deltaY & 0) {
wheelTimer = setTimeout(function(){
iScroll.next();
} else if (e.deltaY & 0 && iScroll.currentPage.pageY != 0) {
wheelTimer = setTimeout(function(){
iScroll.prev();
addWheelListener($('body')[0], wheelSlide);
我本意是用延时抵消掉重复触发的滚轮事件，最后合成一个事件触发，没想到测试之后，Mac上的问题并没有解决。
于是我想，用事件防抖的思路处理应该还是不对，即便是延迟时间较短，如果事件持续触发的话肯定翻页还是会被无限的延迟阻塞掉，至此我想换用事件节流再试试。在找资料的时候，意外发现了Underscore.js这个工具库，里边不仅有现成的节流和防抖（中文文档里用的是“防反跳”）函数可以用，而且还支持链式调用，并且压缩版本也才十几k，正合我意。
说干就干，马上用Underscore撸了个事件节流版的：
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);//这里毫秒数用了400，大概相当于一个短动画的执行时间
addWheelListener($('body')[0], wheelSlide);
链式写法看上去还挺不错的！进本机浏览器（PC）……嗯？为啥最后会跳一下？赶紧翻文档，又加了个参数上去：
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也从一滑到底变成了有“段落感”的跳动，但结果还是不对……一狠心把毫秒数改成了5000，结果呢：还、是、不、对、、、。。。（//陷入循环懵逼状态ing……）痛定思痛，一定是文档看的不够多！于是又啃了一遍Underscore.js的文档（虽然是翻译的，囧……），发现防抖居然有个[immediate]参数，是可以优先执行的！大喜过望~接着撸：
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都能一页页的翻页了有！没！有！不过翻页的动作还有点迟滞，于是果断把毫秒数改小：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);
Mac触控板bug踩坑 +1；
理解了事件节流和事件防抖的概念；
Underscore.js真好用；
感谢git把每次的修改都记了下来。
1 收藏&&|&&1
你可能感兴趣的文章
10 收藏，1.7k
5 收藏，504
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
完全蒙圈了
完全蒙圈了
没明白你讲啥
没明白你讲啥
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。这款配件可以把苹果键盘和触控板组合起来_Apple 苹果_cnBeta.COM
对于 iMac 用户来说，苹果推出的 Magic 键盘以及 Trackpad 2 触摸板都是非常不错的配件产品，它们能够帮助用户获得更加方便的使用体验，如果说有什么不好的地方，那就是它们并不是一个整体。好在，配件制造商 Twelve South 推出的 MagicBridge 能够解决这个问题。
这款产品的唯一作用就是将 Magic 键盘以及 Trackpad 2 触摸板组成一个整体。MagicBridge 的内部空间刚好可以容纳 Magic 键盘以及 Trackpad 2 触摸板，用户可以根据自己的使用习惯将 Trackpad 2 触摸板稳稳地固定在 Magic 键盘的左侧或者右侧。值得一提的是，Twelve South 在这款产品上采用了一个非常人性化的设计，将 Magic 键盘以及 Trackpad 2 触摸板装进来之后，电源键并没有被遮挡，中间部位还为 Lightning 接口预留了位置。目前，这款 MagicBridge 配件的市场价格为 35 美元（约合人民币 240 元）。对于已经购买有Magic 键盘以及 Trackpad 2 触摸板的 iMac 用户来说，MagicBridge 是一个非常不错的选择。访问:
对文章打分
这款配件可以把苹果键盘和触控板组合起来
阅读 (24384) 评论 (10)
阅读 (23476) 评论 (5)
阅读 (19113) 评论 (2)
阅读 (51877) 评论 (13)
阅读 (39952) 评论 (5)
阅读 (31509) 评论 (4)
Advertisment ad adsense googles cpro.baidu.com苹果电脑的触控板有哪些快捷功能_百度知道
苹果电脑的触控板有哪些快捷功能
我有更好的答案
花点时间记忆它们对将来提高效率非常重要）：command + w 关闭当前窗口（在多标签程序中：Fn + Left HomeFn + Right EnFn + Up PageUpFn + Down PageDownMacbook的键盘布局中也只有Delete，这些快捷键都是相同的功能，所以，花点时间记忆它们对将来提高效率非常重要）：command + w 关闭当前窗口（在多标签程序中。Macbook的键盘布局中没有独立的Home/End/PageUp&#47，而没有独立的Del (Forward Delete)：Fn + delete 删除 (Forward Delete)command + delete 删除文件shift + command + delete 清空回收站应用程序通用快捷键（在几乎所有程序中、音量大小等等。但是。Macbook的键盘布局中没有独立的Home/End/PageUp&#47，而没有独立的Del (Forward Delete)：Fn + delete 删除 (Forward Delete)command + delete 删除文件shift + command + delete 清空回收站应用程序通用快捷键（在几乎所有程序中，这些快捷键都是相同的功能，所以，相当于关闭当前标签）（close window）command + q 关闭当前程序（quit）command + m 将当前窗口（程序）最小化（隐藏）（minimize）command + a 全部选择（select all）command + c 拷贝选中内容（copy）command + x 剪切选中内容（cut）command + v 粘贴到选中位置（paste）command + z 撤销操作（undo）shift + command + z 恢复操作（redo）command + o 打开（open）command + n 新建（new）command + s 保存（save）shift + command + s 另存为（save as）command + p 打印（Print）shift + command + p 页面设置（Page Setup）shift + command + / 帮助菜单（Help）command + ' 偏好设置文字编辑时：command + delete 删除至行首option + delete 删除一个之前一个词fn + delete 删除光标后的字符fn + option + delete 删除光标后的一个词shift + Up 选中光标前的所有内容shift + Down 选中光标后的所有内容shift + Left 选中光标往前至行首的内容shift + Right 选中光标往后至行末的内容command + Up 光标移动到文档首部command + Down 光标移动到文档尾部command + Left 光标移动到行首command + Right 光标移动到行末option + keyboard 特殊字符command + tab / shift + command + tab 切换应用程序（相当于触控板上四指左右划动）Macbook的F1~F12都被定义成各种功能键了，比如调节屏幕亮度、音量大小等等。但是，有些人可能要根据自己过往的习惯更改一下“系统设置”才好。常用系统级快捷键：option + command + esc 强制退出程序option + command + eject 进入休眠状态shift + command + q 注销当前用户control + 1/2/3/4 或 control + Up/Down/Left/Right切换第1/2/3/4个SpaceFTP输入法：control + +/- 翻页option +1 删除最前的自定义词组shift 中英文切换command + space 输入法切换shift + command + q 注销当前用户control + 1/2/3/4 或 control + Up/Down/Left/Right切换第1/2/3/4个SpaceFTP输入法：control + +/- 翻页option +1 删除最前的自定义词组shift 中英文切换command + space 输入法切换，用Fn+方向键替代;PageDown四个键。常用系统级快捷键：option + command + esc 强制退出程序option + command + eject 进入休眠状态在系统设置--硬件--键盘中可以查看和设置一切系统当前所设定的快捷键组合，比如safari浏览器在系统设置--硬件--键盘中可以查看和设置一切系统当前所设定的快捷键组合，用Fn+方向键替代，比如safari浏览器：Fn + Left HomeFn + Right EnFn + Up PageUpFn + Down PageDownMacbook的键盘布局中也只有Delete，相当于关闭当前标签）（close window）command + q 关闭当前程序（quit）command + m 将当前窗口（程序）最小化（隐藏）（minimize）command + a 全部选择（select all）command + c 拷贝选中内容（copy）command + x 剪切选中内容（cut）command + v 粘贴到选中位置（paste）command + z 撤销操作（undo）shift + command + z 恢复操作（redo）command + o 打开（open）command + n 新建（new）command + s 保存（save）shift + command + s 另存为（save as）command + p 打印（Print）shift + command + p 页面设置（Page Setup）shift + command + / 帮助菜单（Help）command + &#39，有些人可能要根据自己过往的习惯更改一下“系统设置”才好; 偏好设置文字编辑时：command + delete 删除至行首option + delete 删除一个之前一个词fn + delete 删除光标后的字符fn + option + delete 删除光标后的一个词shift + Up 选中光标前的所有内容shift + Down 选中光标后的所有内容shift + Left 选中光标往前至行首的内容shift + Right 选中光标往后至行末的内容command + Up 光标移动到文档首部command + Down 光标移动到文档尾部command + Left 光标移动到行首command + Right 光标移动到行末option + keyboard 特殊字符command + tab / shift + command + tab 切换应用程序（相当于触控板上四指左右划动）Macbook的F1~F12都被定义成各种功能键了，比如调节屏幕亮度;PageDown四个键
北京谷数科技有限公司
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。