先讲下需求，在一个 input 框里我们每输入东西都去后端检索，正常的做法是把请求包在防抖里，来减少请求，但这样还是很有概率导致用户输入的东西无效，其次是很有可能我上一次的请求会在下一次请求之后才返回，如果不加顺序锁会导致数据展示错乱。看到百度搜索框的响应后发现他们是下一次请求的时候把之前的请求直接 canceled掉，这样做的好处是用户方面不会有任何感官，而且展示的数据不会错乱。 XMLHttpRequest 在原生 ajax 中提供了一个abort()方法来取消请求 var xhr = new XMLHttpRequest(), method = "GET", url = ""; xhr.open(method,url,true); xhr.send(); // 在取消的时候调用这条 即可取消请求 xhr.abort(); jQuery jQuery 的 ajax 也与原生基本无出入，方法更加简单 var xhr; var ajax…
首先思考一个问题，如果想要在小程序中实现抖音上下切换、拥有漂浮物按钮等怎么办？ 这个问题从 18 年 9 月开始一直让我头痛到睡不着觉，历时八个月，中间有过微信的更新，有过我们自己的努力，终于把这个坑爬出来了。下面会逐一做解决问题的分析，如果想看结果可以直接跳到结尾。 作为稍微有一点经验的前端，看到这道题的时候可能会代入传统网页的思想。 pageScrollTo式 准备 N 个视频容器，在容器上做滑动、点击等事件监听，touchStart 时记录手指 XY 轴，结束时 diff XY 轴判断滑动方向然后调用 pageScrollTo 页面的滚动，滚动到上一个或下一个容器的位置。当然了，这是最基础的想法，且先不说touchStart 到touchEnd 件单靠 XY 轴改变值来判断是否滚动这样的触发条件可靠，视频一多起来实例简直要卡上天，并且如果想要实现手指拖多少视频容器滚动多少，就需要频繁调用 setData，这在小程序中是一个相当高危的操作，即使做了节流性能依旧好不到哪里去，IOS 上可能通过 transition 来让他看起来不卡顿但是有段落感，…
今天发现一个有点难受的 BUG，理论应该是安卓的设计缺陷 这是一个文本域 在安卓上输入完成以后 点击键盘右上角的收回按钮 键盘消失 本来应该是键盘消失表单自动失焦 这个自动失焦在苹果上能够完成 但是安卓上那个输入的光标就一直留在了文本域 这样就导致了一个问题 键盘收回后我点击页面任何一个位置 都会再次把键盘唤醒弹出 屡试不爽 一开始我认为是下面高德地图和微信浏览器不兼容 于是在地图上做了禁用事件处理 但是无果 随后发现这与 input 解决方法 首先想到一件事 键盘唤醒的时候页面的高度就改变了 所以监听下页面 首先记录原页面高度 键盘回收的时候页面高度应该等于原页面高度 这个时候去对文本框进行 blur 操作 var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function() { var thisHeight = $(this).height(); if (winHeight - thisHeight > 50) { $('body').css(…