在范围上的优化，window.setInterval或.change函数

Question

我有点在想50ms的setInterval函数不好吗？ 还是我错了...所以这是这种情况，我有一个输入范围，并且我想在更改时获得该范围的值..所以我有这两个代码..

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

//第二个代码

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

第一个代码可能更适合优化吗？ 第一个代码的问题是我没有获得实时的价值信息，因此在我的文本字段中我想显示该信息，数字仅在我完成更改后才更改，而第二个代码则在移动范围输入时获取数字更改..

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

谢谢！

Answer 1

如果您监听input事件，那么每次更改都会立即触发input事件，您可能会得到更好的结果：

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

如果这样做可以完成工作，那肯定比使用计时器更好。

Answer 2

1. setInterval是跟踪输入更改的错误选择，因为它不与输入中的实际更改同步，它是自己的生活，而且非常重要的是需要使用clearInterval清除，并通过不必要的执行来阻塞事件循环，从而使整个应用程序慢得多。

2. 更好的方法是监听输入的特定事件，例如change ， input ， keyup ， keypress ， keydown 。 它们是专门为处理此类情况而设计的，这就是为什么它们种类繁多的原因。

因此，如果我们使用input ，它将看起来像这样：

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

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

3. 这仍然不能免除您清除事件监听器的麻烦，但是至少现在您的事件监听器正在专门跟踪输入更改，而不仅仅是间隔执行一次。

您可以执行以下操作：

 function inputHandler() { $(".transparency-color span").text($(this).val() + "%"); } $('#transparency-range').on('input', inputHandler); //... // later in you code when needed $('#transparency-range').off('input', inputHandler); 

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

使用上述插件，如果您需要在用户停止键入250毫秒后执行函数，则可以执行以下操作：

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