Question

我想为视频的每个用户存储默认卷（通过将ajax发布到服务器然后将其存储到数据库中），我写这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_2mb.mp4" controls></video>

<script>
    document.getElementById('video').addEventListener('volumechange', function () {
        console.log('change')
        //post a request to server to set default volume by ajax
    })
</script>
</body>
</html>

但我发现当用户通过拖动更改音量时，它会触发数十请求（通过控制台中的change日志检查）...这是脏的（和资源消耗）向服务器发送数十个ajax，唯一有用的ajax是由上一个volumechange事件触发的。

我的问题：

是否可以仅在最后volumechange事件时发送ajax？如果有可能，那么如何实现呢？
如果问题1不可能或需要大量工作，如何解决（发布几个（不是几十个）ajax是可以接受的）？

Answer 1

你需要使用“去抖动”。这与自动完成或预先输入文本框中使用的技术相同。有很多实现和库可以做到这一点。

要解释去抖动，您可以设置超时并在每次事件触发时重置它。如果自上次事件以来经过了足够的时间，则触发行为。

我复制的示例来自https://davidwalsh.name/function-debounce

// Create the listener function
var updateLayout = _.debounce(function(e) {

    // Does all the layout updating here

}, 500); // Maximum run of once per 500 milliseconds

// Add the event listener
window.addEventListener("resize", updateLayout, false);

您会注意到该示例使用了_。这是因为这也是function in the underscore library。

Answer 2

一个简单的解决方案是延迟执行Ajax调用，如下所示：

您的活动会调用一项功能
该函数触发超时（setTimeout），持续约50ms（或更多，取决于你得到的结果）
如果在超时仍处于活动状态时触发该功能，它将取消tge超时并重新启动它。
如果超时没有中断，它将执行您的Ajax调用

示例：https://jsfiddle.net/a5oqunbu/

var timer = null;

function buttonClick() {
    if(timer != null) {
    clearTimeout(timer);
    timer = null;
  } 
  timer = setTimeout(callAjax, 500);
}

function callAjax() {
    console.log("Ajax...");
}

document.getElementById("button").onclick = buttonClick;

如何查看最后一个事件？

2 个答案: