Jquery 减少angularjs UI中的延迟

我正在尝试实现（或者更确切地说是改进）一个用角度指令制作的滑块。 滑块的结构如下所示：

• div
  • 带可拖动滑块的div（左：百分比）
  • 带进度条区域的div（宽度：百分比）
• div
  • 带有显示值的验证的输入框（本例中为百分比）

其中一个滑块还调用服务器函数，查看某个日期是否可用，并在输入字段中显示下一个可用日期。 屏幕的另一部分动态显示所有这些滑块的所有值

我希望滑块部分和进度区域能够立即更新，而不仅仅是范围更新。$apply。其他依赖项和验证可以稍后更新

要获得滑块值，我在鼠标拖动和鼠标单击时进行侦听，并将鼠标事件X位置与滑块边界框进行比较，计算百分比并将其设置为应用于模板的范围

当没有任何东西与作用域值耦合时，上面的方法工作得非常快，但一旦我开始添加观察程序，它就会变得非常慢

我已尝试直接设置css，但在应用范围之前，这不会应用：

link:....
  var sliderDiv = element.find('.slider-handle');
  var progressDiv = element.find('.progress-bar');

updateSlider().....
  sliderDiv.css('left', ''+percent+'%');
  progressDiv.css('width', ''+percent+'%');

这是正确的模式吗？

我需要对字段进行验证，有选择地启用或禁用内容，将滑块绑定到可以更改的值

CSS/DOM操作可以立即应用于角度指令吗？

我尝试的每件事只有在范围被“消化”时才能应用。我知道这是一种反模式，但我愿意做出权衡

**至少可以让Angular部分使用该范围吗**

我试着只为滑块设置一个单独的值，并且只将该值应用于作用域，但它似乎不起作用，作用域似乎只使用了一次

        scope.$apply(new function(){
          scope.tempValue = value;
        });

---

使用$timeout或0.debounce或0.throttle并没有产生任何结果，它只会使性能变得更差。

我不确定这是否能解决您遇到的确切问题（可能与此处未提供的代码有关），但我在尝试使用Angular实现滑块时也遇到过类似的问题

为了解决这个问题，我编写了自己的（）代码，然后按如下方式实现它（仅示例）：

根据代码/需求的性质，您可能需要包装onChange函数内容，因此：

     $('#elementToMakeSlider').sliderBar({  
       onChange:function(value){
         $timeout(function() {
           $scope.sliderVal=val;
         });
       }
     });

---

谢谢，我已经试过了，但是它让UI看起来很慢，因为它将所有请求排队，然后消化它们。因此，如果您快速前后移动滑块，然后停止，则输入字段将在一段时间内跟上更新。理想情况下，它们应该只显示最后一次更新，就像debounce一样，只是我不能在使用debounce之前不调用$timeout。如果您查看滑块的方法，有一个

start

只有在滑块完成更改时才会触发。您可以使用它来设置范围变量和onChange方法来执行任何GUI更新，这将停止不必要的摘要项泛滥。这将解决问题，但客户端希望更新可见，我认为这也是良好的UI实践。我已经添加了一个300毫秒的去盎司，这可以完成这项工作，但它仍然不正常，因为一旦字段被验证/更新，它也会减慢快速的UI更新。我将您的答案设置为已接受，因为没有其他人对此给出任何建议。建议对以后阅读此内容的任何人都是可以的。我仍然在寻找强制CSS/DOM更新的方法不需要消化东西，但现在就可以了。

     $('#elementToMakeSlider').sliderBar({  
       onChange:function(value){
         $timeout(function() {
           $scope.sliderVal=val;
         });
       }
     });