JavaScript addEventListener 延迟

Question

我正在使用JavaScript构建一个移动应用程序。在其中，我需要获取手机加速度计的数据，因此我将事件监听器附加到它上面：

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function (event) {
        if (typeof(event.alpha) != 'undefined') {
            //here goes function for an event
        }
    }, false);
}

但问题在于它每毫秒获取一次数据，因此当我调用函数根据此数据进行绘制和重绘时，它会每毫秒执行一次 -> 应用程序会崩溃。

有没有延迟获取数据或以更小的方式接收数据的方法？例如，是否有一个侦听事件的函数，例如每半秒钟触发一次？

- Kakofonn

Answer 1

这被称为“函数去抖”。基本上，你只在一定时间内执行你的代码。一个简单的实现方法是：

var lastExecution;
addEventListener("deviceorientation", function (event) {
    var now = Date.now();
    if (now - lastExecution < 17) return; // ~60Hz
    lastExecution = now;
    ...
}, false);

是的，lastExecution一开始是未定义的。 这没关系。

- MaxArt

---

如果您遇到未定义的问题，可以将其起始值设置为0。 - Martijn

@Martijn 是的，但是...如果日期在1970年之前就会有问题 :) 哦，好吧，但是undefined可能会给出一个晦涩的结果，但无论如何都可以。 - MaxArt

这并不是对你的代码的评论，只是为那些认为这是一个问题的人提供一个解决方案 :) - Martijn

顺便说一句，我很怀疑在1970年之前会有人使用这段代码:p - Martijn

Answer 2

我认为您正在寻找类似于 detrottle/debounce 的东西。

如果您使用 jQuery，这些人使它变得容易：

window.addEventListener("deviceorientation", function (event) {
    $.throttle( 250, function (event){
        // Code here will excecute every 250 ms
    })
 );

- Martijn

---

jQuery从未被提及过。 - MaxArt

限流与jQuery完全独立。那个“插件”只是将常见功能放在$命名空间中，目的不明；但与jQuery关系不大。 - Bergi

好的，重新表述一下以表明它是jQuery，但不要暗示dethrottle只适用于jQuery。 - Martijn