【问题标题】：Clever way to bypass debounce for view?绕过去抖动查看的巧妙方法？
【发布时间】：2023-03-07 07:44:02
【问题描述】：

基本上，我希望我的 scope.$watch 能够实现去抖动，但我希望在没有去抖动的情况下为我的视图设置一个单独的观察者。我可以使用任何不脏的技术吗？

<my-slider></my-slider>

<script type="text/coffeescript">
angular.module('myApp', [])
.directive 'mySlider', ->
  link = (scope) ->
    scope.sliderValue = 0
    scope.$watch 'sliderValue', (value) ->
      console.log 'Slider Value: ' + value

  link: link,
  restrict: 'E',
  template:
    'Value: {{sliderValue}}<br>' +
    '<input type="range" step="1" min="0" max="10" ' +
    'ng-model="sliderValue" ng-model-options="{ debounce: 1000 }" />'

angular.bootstrap document, ['myApp']
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>

【问题讨论】：

“为我的视图提供一个单独的观察者而不会去抖动”？在您的代码中，您使用 ng-model-options 为您的模型设置 1 秒的 debounce。现在您想在没有debounce 的情况下为该模型创建一个$watcher？你知道这听起来有多矛盾吗？也许您可以为此使用中间的model，这首先会破坏debounce 的目的。例如：从您的<input type="range" 中删除ng-model-options，为该模型设置一个$watcher，该模型对另一个模型实现debounce。你为什么要这样做？
@Joseph 从心理上安抚用户。没有人喜欢切换表单控件并获得延迟反馈，但后端处理不需要执行滑块的每个刻度。这怎么矛盾？
"后端处理不需要执行滑块的每一个tick" debounce 选项与后端无关。如果您将 debounce 设置为 1 秒，则模型将在用户更新 input 后 1 秒后更新。换句话说：如果您将模型设置为 1 秒的debounce，则直到一秒后您才能收到模型的新值的通知，因为模型的值直到一秒才会更新秒后。对于您所说的，在我看来您想要的是自定义 debounce 函数。
@Josep，这似乎是一个很常见的用例。假设我有一个文本区域，每 1 秒更新一次数据库中的模型。现在我想创建一个自定义验证器，为实时键入的每个键更改 textarea 样式。使用 debounce 我不能这样做，除非我以某种方式为一个特定的观察者停用 debounce。
顺便说一句，这个答案可能会有所帮助：stackoverflow.com/a/13890580

标签： angularjs coffeescript

【解决方案1】：

我认为你想要的是这样的：

angular.module("myApp", []).directive "mySlider", ($timeout) ->
  link = undefined
  link = (scope) ->
    debouncePromise = undefined
    scope.sliderValue = 0
    scope.$watch "sliderValue", (value, oldVal) ->
      return  unless oldVal
      $timeout.cancel debouncePromise  if debouncePromise
      debouncePromise = $timeout(->

        #your call to the server here!
        console.log value
        return
      , 1000)
      return

    return

  link: link
  restrict: "E"
  template: "Value: {{sliderValue}}<br>" + "<input type=\"range\" step=\"1\" min=\"0\" max=\"10\" " + "ng-model=\"sliderValue\" />"

Example

【讨论】：