- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在使用 hammer.js 在宠物项目上实现一些触摸屏功能。
所需的产品是一张 map ,可以通过触摸屏四处拖动并放大和缩小。我让它工作了,一切都很好,除了 pinchin/pinchout 机制非常非常慢。在夹点发生和事件触发之间存在非常明显的延迟。
这是相关的 JQuery/JS 代码:
编辑:根据 Simon 的建议,代码现在更好(也更快)了。这是完成的版本
$(document).ready(function(){
//Function which simulates zoom on the map on pinchin/pinchout
$('#map').hammer()
.on("pinchin", function(e) {
var scale = $(this).css('transform');
scale = (scale == null ? $(this).css('-webkit-transform') : scale);
scale = (scale == null ? $(this).css('-ms-transform') : scale);
scale = scale.split(" ");
scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
if(scale > 1) {
scale = ('scale(' + (scale - .1).toString() + ')');
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
}
})
.on("pinchout", function(e) {
var scale = $(this).css('transform');
scale = (scale == null ? $(this).css('-webkit-transform') : scale);
scale = (scale == null ? $(this).css('-ms-transform') : scale);
scale = scale.split(" ");
scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
if(scale < 5) {
scale = ('scale(' + (scale + .1).toString() + ')');
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
}
});
});
最佳答案
这很不稳定,因为您在每个事件处理程序中进行大量计算。
首先,缓存您的变量。调用 $('#map')
总是进入 DOM,获取对象并返回它。只做一次,缓存结果。
同样的事情在你的计算之后。不要一直调用这个a[0] + a[7]
,计算一次,应用多次。
然后,好吧,将您的 .css()
调用合并到一个具有多个属性的调用中。
这会有所帮助,但要获得如丝般顺滑的效果,请继续阅读:
拥有流畅的动画并不难,但您需要了解需要改进的地方以及如何限制布局成本、回流和重新布局。我不能在这里解释所有这些,但我可以给你一些概念来研究:
首先,在触发任何 css 更改之前使用 requestAnimationFrame
。这将确保 css 修改发生在动画帧的开头,而不是结尾 - 因此它有助于降低跳过帧的风险。
然后,尽可能多地使用 css3 转换(我不是说使用 CSS 样式表,我是说使用 JavaScript 的 css3 属性)。这些属性表现得更好。同时,尝试删除大部分成本高昂的 CSS 样式并进行大量测试,因为有些样式的渲染时间成本很高(例如投影等)。
然后,查看并阅读大多数 Google 开发团队关于尊重 60 fps 速率的演示文稿,以及关于让您的网站无卡顿的任何内容。他们通常会介绍基本概念,帮助您更好地了解正在发生的事情,以及在何处/如何优化和跟踪您网站的性能。
关于javascript - Hammer.js 在 pinchin/pinchout 上缓慢且不稳定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19454893/
如果输入稳定,我想触发 AJAX 请求(以便不在每个新字符后发送请求)。我尝试了以下方法: $('#input').keyup(function(){ // Get the value when
我读到,我们可以插入以将选择排序更改为稳定排序,而不是交换。我在网上得到了以下相同的实现。 void selection ( int a[], int n ) { while ( --n >
我正在尝试创建一个非常节省空间的不寻常的关联数组实现,我需要一个满足以下所有条件的排序算法: 稳定(不改变具有等键的元素的相对顺序。) 就地或几乎就地(O(log n) 堆栈很好,但没有 O(n) 空
我有一个节点的无线网状网络,每个节点都能够向其邻居报告其“距离”,以(简化的)信号强度来衡量。节点在地理上位于 3d 空间中,但由于 radio 干扰,节点之间的距离不需要在三角(三角?)上一致。即,
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在实现一个玩具调度程序,它读取进程规范(例如到达时间、总运行时间)的输入文件,然后根据随机 io/cpu 突发调度进程。 文件格式 Arrival time, total CPU time, CP
我正在使用 JRedis 的同步实现,但我打算切换到异步方式与 Redis 服务器通信。 但在此之前我想问一下社区 JRedisFuture 是否实现了 alphazero 的 jredis对于生产使
我们正在为我们的公司构建一个RESTful API,它将提供XML,JSON和可能的其他内容类型。 我的团队正在寻找一个框架(按优先顺序排列): 有据可查 理想的情况下,它具有出色的教程以及繁荣的社区
我的网站希望用户上传他们的照片...但我该如何保护我们的服务器免受伤害?只允许 JPG 应该可以避免病毒问题,但如果有人选择 10Gb 文件怎么办 - 这会减慢整个网站的速度吗? 我们使用的是经典 A
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 8 个月前关闭。 Improve this ques
据我所知,paintEvent() 是在 QApplication 对象的“主循环”中执行的,并且可以为其内部系统任务花费时间,从而延迟执行排队槽或其他事件。 但是,如果我需要播放非常流畅的动画并且我
我想对随机排序的 ActiveRecord 模型列表(来自 MySQL 数据库的行)进行分页。 但是,这种随机化需要在每个 session 的基础上持续存在,以便访问该网站的其他人也会收到一个随机的、
在 Flutter Web 稳定后,我尝试按照文档中给出的说明将我的 Flutter Mobile 应用程序转换为 Flutter Web。一切都很好,但这里的问题是 Web 上的文本不可选择!我刚刚
我正在尝试制作一个包含 Nginx stable 最新使用 vts 模块编译的 dockerfile .... 我遇到了一个大问题,当我放入将下载的 docker 文件时我找不到一些汽车链接安装最新的
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我正在使用以下命令将 Airflow 部署到 Kubernetes 中:https://github.com/helm/charts/tree/master/stable/airflow 我正在尝
我已经安装了本地测试elasticsearch和logstash,它们似乎看不到本地es-知道在集群/ ns中如何看到es吗? helm repo add elastic https://helm.e
我最近加入了一家公司,担任发布工程师,在这里,大量的开发团队以各种语言开发了众多服务,应用程序和Web应用程序,它们之间具有各种相互依赖性。 我正在尝试找到一种简化并最好自动发布的方法。当前,发布团队
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我想知道一种在 Windows 上使用简单批处理和 ffmpeg 稳定 goPro 视频的简单方法。 最佳答案 1) 在您的计算机上安装 ffmpeg:按照 steps 安装 2) 在您要处理的视频旁
我是一名优秀的程序员,十分优秀!