Как проверить событие, которое является последним событием?

Я хочу хранение громкости по умолчанию для каждого пользователя видео (путем размещения Аякса сервера, то хранение его в БД), и я пишу это:Как проверить событие, которое является последним событием?

<!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 на сервер, и единственный полезный аякс, который запускается последнее volumechange событие.

Мой вопрос:

возможно отправить Аякса только если это последнее volumechange событие? Если это возможно, то как это реализовать?
Если вопрос 1 невозможен или требует много работы, как работать (можно разместить несколько (не десятки) аякс)?

источник

2016-09-25 Sayakiss

Вы должны использовать "дребезга". Это тот же метод, который используется в текстовых полях автозаполнения или ввода текста. Существует множество реализаций и библиотек, которые это делают.

Чтобы объяснить отказ, вы устанавливаете тайм-аут и каждый раз перезапускаете его. Если с момента последнего события прошло достаточно времени, активируйте поведение.

Пример, который я копировали из 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.

источник

2016-09-25 07:51:41 Soviut

Простое решение заключается в задержке выполнения вызова Ajax, как это:

Ваше событие вызывает функцию
Эта функция запускает тайм-аут (SetTimeout), который длится около 50 мс (или больше, в зависимости от результатов, которые вы получаете)
Если функция запускается, пока таймаут все еще активен, он отменяет тайм-аут 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;

источник

2016-09-25 07:51:33

Как проверить событие, которое является последним событием?

ответ

Смежные вопросы