我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能,它允许我捕捉到滚动条中的元素(图像)。
通过绑定到元素的scroll事件,我在用户滚动元素时应用各种操作(例如预加载、隐藏界面元素等)。其中之一取决于滚动事件,并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况;
我无法准确确定快速滚动操作是否完成。
我可以在每个滚动上设置一个setTimeout,它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置,最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。
底线:如何检查滚动是否完成,因为:
scroll-snap-type已设置)我正在构建一个循环文本生成器.生成器将来自多个数组的句子(文本)组合在一起,通过视觉"循环"并附加它们.我认为最好用我现在构建它的基本版本的生成器创建一个小提琴:
说明
基本工作如下:
Array1,Array2并且Array3在小提琴)combo0并且combo1在小提琴中)Generate调用该函数,该函数可视化地循环句子中的句子(combo0[0]在小提琴中)var times = 8在小提琴中)Generate再次运行,这次使用第二个数组(combo0[1]在小提琴中)回调的原因是我需要"等待"循环效果完成,然后再继续.
问题
虽然这正是我所需要的(而且我非常怀疑这是否是这样做的方法;我在写一个循环自身的函数时总觉得有点奇怪),我有以下问题:
在combo数组中,我定义哪个'句子'数组可以是可能的组合.如果有两种组合,这可以正常工作,但有两个以上,我有一个问题:
Generate(combo0[0], i, function(i) { //generate from first array element of combo0, callback to generating from second array of combo0
Generate(combo0[1], i, function(i) {
$('div#status').html('Done!'); //show status
$('input#generate').removeAttr("disabled"); //enable button
});
})
Run Code Online (Sandbox Code Playgroud)
我必须递归地重写它以适应combo由3个甚至4个选项组成的数组的可能性.如果一个combo数组只包含2个(或1个)数组,这可能会破坏脚本.
这就是我被困住的地方.主要问题是,如果我循环遍历combo数组,例如使用.each();, …
我遇到了一个挑战,我需要一个在给定范围内返回随机数的函数0 - X.不仅如此,我还要求返回的数字是唯一的 ; 不复制先前调用该函数时已返回的数字.
可选地,当完成此操作时(例如,范围已经"耗尽"),只需返回范围内的随机数.
怎么会这样做呢?
对于我正在进行的项目,我遇到了一个奇怪的问题,我在这里(或其他任何地方)找不到答案.
我尝试创建一个小提琴来演示会发生什么,但是由于我的脚本的性质以及jsfiddle的运行方式,它无法正常工作.无论如何,这里是一个指向小提琴的链接,所以至少你会得到代码.
我想要发生什么
执行单个处理器(onViewportChange三个可能的)window事件:resize,orientationchange和scroll.根据事件类型,处理程序将确定要执行的操作.听起来很简单.
我做了什么
对于此示例,我限制了处理程序以回显事件类型,以用于测试目的:
var onViewportChange = function(e) {
alert(e.type);
};
Run Code Online (Sandbox Code Playgroud)
我将处理程序绑定到事件:(我还尝试.bind()了一系列事件,以及几个单独的绑定)
$(window).on({
'orientationchange resize scroll' : function(e){
onViewportChange(e);
}
});
Run Code Online (Sandbox Code Playgroud)
HTML是完全空的,除了任意基本元素(doctype,html,body和ofcourse jquery和这个脚本)
实际发生了什么
现在它变得奇怪了:桌面浏览器上的事件很好(主要是由于缺少方向更改事件触发),但在移动设备上没有(在iOS6 + iPad第3代和iOS6 + iPhone 5上测试).当我旋转设备时;
orientationchange,resize其次是scrollresize随后闪现orientationchangeorientationchange后跟resize(请注意,由于竞争条件,事件的顺序可能不准确.)
这就是为什么我将它链接到orientationchange事件:当我删除orientationchange事件(离开resize和scroll)时,只有scroll事件在设备轮换时触发,但不再是resize事件.
我不明白为什么所有事件都会立即发生.至少; 我可以想象a resize是orientationchange因为窗口尺寸发生变化而触发的,但是 …
javascript ×3
jquery ×3
arrays ×2
animation ×1
css ×1
easing ×1
mobile ×1
orientation ×1
random ×1
scroll-snap ×1