Question

我是JS的新手。我正在编写一些JS / PHP脚本（wordpress）以每秒增加DB中的计数器（跟踪HTML mp3播放器的播放时间）。

主要思想是，每次播放器的“当前时间”更改时，我都会增加数据库计数器。

在我切换到计算机上的其他浏览器选项卡或其他应用程序之前，该代码似乎运行良好。

您知道为什么只有在播放器标签上才能运行代码吗？

注意：为进行调试，我将所有内容都放入了test3（）函数中，并在控制台中手动调用它。

感谢您的帮助

function test3() {

    currentTime = clean(document.getElementsByClassName('hap-media-time-current')[0].innerHTML);
    currentTime = parseInt(currentTime, 10);
    var post_id = "5615";

    $("body").on('DOMSubtreeModified', ".hap-media-time-current", function (event) {
        currentTime = clean(document.getElementsByClassName('hap-media-time-current')[0].innerHTML);
        currentTime = parseInt(currentTime, 10);
        newTime = currentTime;

        if (oldtime == currentTime) {
            //console.log(currentTime);
            //oldtime = currentTime;
        } else {
            if (!isNaN(currentTime)) {
                console.log(currentTime);

                $.ajax({
                    url: postclick.ajax_url,
                    type: 'post',
                    data: {
                        action: 'post_playback_time',
                        post_id: post_id
                    },
                    success: function (response) {
                        //
                    }
                });
                oldtime = currentTime;
            }
        }
    });
}

即使浏览器处于后台，我也希望增加

Answer 1

您必须将函数插入setTimeout内，而不是在以下情况下插入

：

setTimeout(function(){
     test3();
}, 100);

在此示例中，我每100毫秒调用一次setTimeout，但是您可以根据需要进行调整。

Answer 2

这是我的建议：不要使用过时的DOMSubtreeModified事件。

相反，请检查DOM或尝试检查window并查找audio元素在哪里，并通过重新分配相同的功能以1000ms的粒度跟踪 Listen Time 到Event.target事件上的同一元素（timeupdate）：

下面是一个示例，可为您提供使用两个Audio元素的想法：

const el_audio = document.querySelectorAll('[data-post-audio]');

const audioTimeupdate = {}; // For storing session post_id and played seconds
const listenTimeGranularity = 1000; // Do every second; or set as desired

const fn_listenTime = (ev) => {
  const el = ev.target;
  const post_id = el.getAttribute('data-post-audio');

  el.removeEventListener('timeupdate', fn_listenTime);
  setTimeout(fn_listenTime.bind(el, ev), listenTimeGranularity);

  if (el.paused) return; // Do not track time if paused
  if (!audioTimeupdate.hasOwnProperty(post_id)) {
    audioTimeupdate[post_id] = 0;
  } else {
    audioTimeupdate[post_id] += listenTimeGranularity;
  }

  // TODO: AJAX HERE
  // The post ID is: post_id
  // The total listened milliseconds are: audioTimeupdate[post_id]
  // If you increment the milliseconds on server-side, just send: listenTimeGranularity
  console.log(`
    Post ID: ${post_id}
    Listen ms: ${audioTimeupdate[post_id]}
    Increment by: ${listenTimeGranularity}
  `)
}

el_audio.forEach(el => el.addEventListener('timeupdate', fn_listenTime));

<audio data-post-audio="5614" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" controls loop></audio>
<audio data-post-audio="5615" src="https://upload.wikimedia.org/wikipedia/fi/c/c6/Metallica_-_Enter_Sandman_%28sample%29.ogg" controls loop></audio>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

即使最小化了浏览器，如何运行我的JS脚本？

2 个答案: