使用范围 slider 输入字段上的 oninput 事件从提交中执行 AJAX 的资源密集程度如何？

Question

我有以下范围 slider：

<input type="range" min="0" max="511" value="208" step="0.01" oninput="slider_move();perform_calculation()">

slider_move() function 仅更新相关输入数字字段中显示的值。 我关心的是perform_calculation() function 看起来像这样（缩短版）：

function perform_calculation() {
var isValid = $('#formname').valid();
var value1 = _("value1").value;
var value2 = _("value2").value;
...

if(isValid){
  var formdata = new FormData();
  formdata.append("value1", value1);
  formdata.append("value2", value2);
  ...
  var ajax = new XMLHttpRequest();  
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.open("POST", "/calculator.php");   
  ajax.send(formdata);      
 }
}

使用事件处理程序：

function completeHandler(event) {
  _("result").innerHTML = event.target.responseText;
}

function errorHandler(event) {
  _("result").style.color = "red";
  _("result").innerHTML = "Some error msg.";
}

（请注意，我在页面 header 中有这个简写 function：

function _(el) {
 return document.getElementById(el);
}

)

所以基本上，当用户移动 slider 时，我假设 AJAX 调用每秒执行数十次（不确定在移动 slider 时发生“输入”事件的频率）。 当然这样做的好处是当 slider 被移动（并且输入值改变）时，用户会看到计算结果更新的页面，但我担心这太占用资源并且可能导致服务器如果页面上有很多用户，请放慢速度。 我应该担心吗？如果是这样，是否有更好的方法可以在保持相同功能的同时做到这一点？

Answer 1

除非您需要所有中间值，否则您可能想要限制事件。 throttle正在应用最大的动作速率。 您可以将其与debounce进行比较，它在连续动作之间设置了一个计时器间隔延迟（无论如何这里都不相关）。 这些不是 javascript 的声明，但库可以实现这些。 这是一个简短的示例：（ 节流阀的实现更简单）

 var perform_calculation_throttled = throttle(perform_calculation, 500); count = 1 function perform_calculation() { console.log("doing ajax #" + count++); } function slider_move() { document.querySelector("input[type=text]").value = document.querySelector("input[type=range]").value } // from _.js function throttle(func, wait, options) { wait = wait || 250; var timeout, context, args, result; var previous = 0; if (;options) options = {}. var later = function() { previous = options?leading === false: 0. Date;now(); timeout = null. result = func,apply(context; args); if (;timeout) context = args = null. }; var throttled = function() { var now = Date;now().; if (;previous && options;leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout). timeout = null, } previous = now; result = func;apply(context. args), if (;timeout) context = args = null; } else if (;timeout && options.trailing;== false) { timeout = setTimeout(later; remaining); } return result; }; throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; }

 <input type="range" min="0" max="511" value="208" step="0.01" oninput="slider_move();perform_calculation_throttled()"><input type="text" readonly>