Angular 垫子滑块更改事件触发频率过高

我使用一个垫子滑块让用户设置一个值。

（输入）

事件发射器用于显示值“live”（鼠标仍在向下）。 这是有效的。 此时，

（更改）

事件发射器用于识别用户何时选择了值（释放鼠标）

第一个问题是，在与滑块的正常交互过程中，更改事件会触发两次：一次是在首次单击滑块时触发，另一次是在释放滑块时触发。 我希望只有在释放滑块时才会触发事件，或者有一个函数可以区分这两个事件，并且只对释放事件进行操作

第二个问题是，当设置滑块的新值时，我必须发出HTTP请求。我不希望这种情况经常发生，所以我希望有一种暂停。只有在经过一定时间并且没有发生新的更改事件时，我才希望发出HTTP请求

我已经尝试用锁来实现这一点，但它不起作用，因为有时只触发一个更改事件（例如，当单击滑块而不拖动它时），然后锁变量被错误地翻转，锁机制因为反转变量而不再工作

有什么方法可以解决这些问题并实现我想要的吗？

在触发HTTP请求之前，您可以使用它来确保事件之间有一定的时间延迟

例如：

@组件（{模板：`}）
导出类DelayedSliderComponent在NIT上实现{
valueSubject=新行为主体（0）；
恩戈尼尼特（）{
this.valueSubject.pipe（debounceTime（1000））.subscribe（value=>{
//http请求可以转到这里
});
}
滑翔（事件：MatSliderChange）{
this.valueSubject.next（event.value）；
}
}

上面的组件包含一个绑定到输入事件的滑块。每次值更改时，此输入事件都会立即触发。valueSubject每次调用onSlide时都会获取新值，但由于debounceTime（1000）的原因，订阅者只会在值上次更改至少一整秒（或1000毫秒）后收到任何新值。

这是一个错误。看

解决方法： 使用事件

幻灯片

这是“真实”（预期）“变化”事件

更新： 已知问题：使用（slidend）时，只需单击滑块的范围线，在从未拖动滑块之前不会触发滑块。或者，您可以监听（mouseup）事件或（pointerup）。但是使用pointerup等，鼠标光标必须位于组件内部。（重叠）否则您必须处理指针的中止事件

我找到了幻灯片/指针问题的解决方案。只需将其与简单的更改检测相结合

---

您也可以添加keyup事件来处理键盘输入。

Debouce通常是个好主意。但是，如果用户在范围线上向下指针（触发更改）并缓慢更改拖动，则这并不能解决问题。您仍将有指针向下的事件@多米尼克：那绝对是真的。如果这成为一个问题，您可以添加skip（1）来跳过第一个任务。

sliderOnChange(value: number) {
  if (this.mySliderValue!== value) {
    this.mySliderValue= value;
    console.log('changed: ', value);
  }
}