javascript - 鼠标移动 | touchmove 性能问题
问题描述
JSFiddle
https://jsfiddle.net/wz9ghpnc/
问题
使用:最新的 jQuery
为什么这在移动设备上落后很多?我真的完成了尝试优化这一点。
我怎样才能应用去抖动/节流之类的东西?我尝试将 setTimeout 添加到具有 50 毫秒延迟的 move() 函数,但这也很滞后。
在移动设备上移动太慢了……动画太慢了……
let $state = {
afterDown: {
clientX: 0,
scrollLeft: 0,
},
afterUp: {
clientX: 0,
scrollLeft: 0,
},
dreamedScrollLeft: 0,
isDown: false,
};
let centering = false;
let duration = 250;
let messages = false;
function message () {
if (messages === true) {
console.log('%c addScroll ', 'background: #000; color: #fff;', ...arguments);
}
}
// Events
function down (parent) {
return (event) => {
message('down');
if ($state.isDown === false) {
$state.afterDown.clientX = event.originalEvent.touches ? event.originalEvent.touches[0].clientX : event.clientX;
$state.afterDown.scrollLeft = $(parent).scrollLeft();
$(parent).stop();
$state.isDown = true;
}
};
}
function leave (parent) {
return () => {
message('leave');
if ($state.isDown === true) {
$(parent).removeClass('scroll-moving');
$state.isDown = false;
}
};
}
function move (parent) {
return (event) => {
message('move');
if ($state.isDown === true) {
$(parent).addClass('scroll-moving');
const clientX = event.originalEvent.touches ? event.originalEvent.touches[0].clientX : event.clientX;
$(parent).scrollLeft($state.afterDown.clientX + $state.afterDown.scrollLeft - clientX);
}
};
}
function scroll (parent) {
return () => {
message('scroll');
if (centering === true) {
if ($(parent).scrollLeft() === $state.dreamedScrollLeft) {
message('after scroll centering');
if (centering === true) {
if ($(parent).scrollLeft() === $state.dreamedScrollLeft) {
message('after scroll centering');
}
}
}
}
};
}
function up (parent) {
return (event) => {
message('up');
if ($state.isDown === true) {
$(parent).removeClass('scroll-moving');
$state.afterUp.clientX = event.originalEvent.changedTouches ? event.originalEvent.changedTouches[0].clientX : event.clientX;
$state.afterUp.scrollLeft = $(parent).scrollLeft();
if ($state.afterDown.clientX > $state.afterUp.clientX) {
message(' moving right');
$state.dreamedScrollLeft = $(parent).scrollLeft() + ($state.afterDown.clientX - $state.afterUp.clientX);
}
if ($state.afterUp.clientX > $state.afterDown.clientX) {
message(' moving left');
$state.dreamedScrollLeft = $(parent).scrollLeft() - ($state.afterUp.clientX - $state.afterDown.clientX);
}
$(parent).animate({ scrollLeft: $state.dreamedScrollLeft, }, duration, 'linear');
message($state.afterDown, $state.afterUp, $state.dreamedScrollLeft);
$state.isDown = false;
}
};
}
$.fn.extend({
addScroll: function (i) {
if (i.centering) {
centering = i.centering;
}
if (i.duration) {
duration = i.duration;
}
if (i.messages) {
messages = i.messages;
}
$(this).css('overflow', 'hidden');
$(this).bind('mousedown touchstart', down(this));
$(this).bind('mouseleave', leave(this));
$(this).bind('mousemove touchmove', move(this));
$(this).bind('scroll', scroll(this));
$(this).bind('mouseup touchend', up(this));
},
});
解决方案
推荐阅读
- performance - LogRocket 中会话速率限制/节流的解决方法
- python - 我是否正确使用 CreateView 将用户对象传递给 ModelForm?
- image - Liferay:Ckeditor 工具栏图标在 TEST 和 PROD 环境中被 CSP 阻止
- java - 为什么我们不能在启动线程后调用 setDaemon(true)?
- reactjs - 如何从 TypeScript 中的字符串名称动态构建元素?
- ruby-on-rails - 如何按关联模型字段的平均值排序?
- .htaccess - 将 robots.txt 从 http 重定向到 https
- postgresql - 非交互式 postgres 命令在 Ubuntu 机器中挂起
- cookies - 在 Apollo GraphQL 游乐场(版本 3)中允许使用 Cookie
- c++ - 按住按钮时Arduino程序多次重新执行