gpt4 book ai didi

javascript - 如何检查一个事件是最后一个事件?

转载 作者:行者123 更新时间:2023-11-30 11:50:15 24 4
gpt4 key购买 nike

我想为视频的每个用户存储默认音量(通过将 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日志检查)...它很脏(和资源consuming) 向服务器发送几十个 ajax,唯一有用的 ajax 是由最后一个 volumechange 事件触发的。

我的问题:

  1. 是否可以仅在最后一个 volumechange 事件时才发送 ajax?如果可能,那么如何实现?
  2. 如果问题 1 不可能解决或需要大量工作,如何解决(发布几个(不是几十个)ajax 是可以接受的)?

最佳答案

您需要使用“去抖动”。这与自动完成或预输入文本框中使用的技术相同。有很多实现和库可以执行此操作。

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

我复制的例子来自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 .

关于javascript - 如何检查一个事件是最后一个事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39684544/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com