范围内的优化、window.setInterval 或 .change 函数答案

【问题标题】：Optimization , window.setInterval or .change function on range范围内的优化、window.setInterval 或 .change 函数
【发布时间】：2018-02-24 08:12:33
【问题描述】：

我有点想 setInterval 函数在 50ms 上是不好的？或者我错了...所以这是这里的情况，我有一个输入范围，我想在更改时获取该范围的值..所以我有这两个代码..

$('#transparency-range').change(function(){
   $(".transparency-color span").text($('#transparency-range').val() + "%")
 })

// 第二个代码

window.setInterval(function(){
  $(".transparency-color span").text($('#transparency-range').val() + "%")
}, 50);

第一个代码是否更适合优化？第一个代码的问题是我没有获得价值的实时信息，所以在我想要显示该信息的文本字段中，数字只有在我完成更改时才会更改，在使用第二个代码时，我在移动范围输入时正在改变数字..

我在应用程序中使用了 10 多次类似的代码，这就是为什么这个优化问题很重要:)

谢谢！

【问题讨论】：

标签： javascript input range setinterval

【解决方案1】：

setInterval 是跟踪输入更改的错误选择，因为它与输入中的实际更改不同步，它过着自己的生活，非常重要的是需要清理 clearInterval 和阻塞事件循环执行不必要的执行，从而使您的整个应用程序变得更慢。
更好的方法是监听输入的特定事件，例如change、input、keyup、keypress、keydown。它们是专门为处理此类案件而设计的，这就是它们种类繁多的原因。

因此，如果我们使用input，它将如下所示：

$('#transparency-range').on('input', function(){
   $(".transparency-color span").text($(this).val() + "%");
});

这将在您键入每个字符后立即为您提供更改反馈。

这仍然不能让您免于清理事件侦听器，但至少现在您的事件侦听器专门跟踪输入更改，而不仅仅是在间隔内执行。

你可以这样做：

function inputHandler() {
  $(".transparency-color span").text($(this).val() + "%");
}

$('#transparency-range').on('input', inputHandler);

//...
// later in you code when needed
$('#transparency-range').off('input', inputHandler);

最后但同样重要的是，由于您的问题是关于优化的，有这种debouncing 函数调用的做法，在您的情况下，这将为您提供两全其美的效果，您仍然会延迟执行，这是您可以控制的，但现在它会在您键入时发生，而不是在模糊时发生。

使用上述插件，如果您需要在用户停止输入后 250 毫秒后执行您的功能，则可以这样：

function inputHandler() {
  $(".transparency-color span").text($(this).val() + "%");
}

$('#transparency-range').on('input', $.debounce(250, inputHandler));

【讨论】：

【解决方案2】：

如果您听input 事件，您可能会得到更好的结果，该事件会随着每次更改立即触发：

$('#transparency-range').on('input', function(){
   $(".transparency-color span").text($('#transparency-range').val() + "%");
});

如果这样做了，那么它肯定比使用计时器更可取。

【讨论】：