避免 setTimeout 与角度 $watch 上的功能重叠

Question

我有两个 div 淡入或淡出的验证过程，具体取决于第一个函数的返回。 setTimeout 是让完成输入输入，因为它会监视 keyup。系统工作，但问题发生在以下情况：

您输入了错误的值（#wrong 出现）> 您重新输入了正确的值 > 当您输入正确的值时，else 函数被触发，因为它尚未完成 > 当输入正确的值时 (. ok 出现）#wrong 也出现，在 setTimeout 延迟之后。

有没有办法避免 else 函数的重叠？也许将真假功能完全分开？

function validatePasscode(code) {
    if (array.indexOf(code) > -1) {
        return true;
    }  
}

$scope.$watch('passcode', function(value) {
    var isValid = validatePasscode(value);
    if (isValid) { 
        $scope.loadNewChannel(); 
        $('.ok').fadeIn(200); 
        $('#wrong').fadeOut(200);
    }
    else {
        setTimeout(function(){
            $('.ok').fadeOut(200); 
            $('#wrong').delay(200).fadeIn(200);
        },2000);
    }
});

Answer 1

请始终调用 clearTimeout()

var timeoutFunction;
$scope.$watch('passcode', function(value) {
var isValid = validatePasscode(value);
clearTimeout(timeoutFunction);
if (isValid) { 
    $scope.loadNewChannel(); 
    $('.ok').fadeIn(200); 
    $('#wrong').fadeOut(200);
}
else {
    setTimeout(function(){
        $('.ok').fadeOut(200); 
        $('#wrong').delay(200).fadeIn(200);
    },2000);
}

});

Answer 2

我会采取一些不同的方法。 Angular 的想法不是在控制器内部进行 DOM 操作。您有几个选择 - 一个是在 $scope 上公开 $isValid，另一个是创建一个执行动画的指令。

至于限制输入，问题是您在每次按键后任意等待2秒。您真正想要的是等到按键完成 - 即只要有人在输入等待，然后在他们暂停一段时间后重新评估。

您可以使用 Underscore 或 Lo-dash 的 debounce 来做到这一点。像这样的：

var applyValidation = function($scope) {
   $scope.isValid = validatePasscode($scope.passcode);
}

因为 debounce 在 Angular 的摘要循环之外触发，你需要 $apply 它：

var validationDelayed = function($scope) {
    $scope.$apply(function(){applyValidation($scope);});
};

然后您可以观看它，并且只有在输入稳定后才会做出反应。这只会在用户停止输入 1 秒后触发检查：

var validationThrottled = _.debounce(validationDelayed, 1000);
$scope.$watch('passcode', function(){validationThrottled($scope);});

同样，这将解决超时问题，但我强烈建议将其移动到动画指令中，尽管您当然可以在此代码中尝试如下：

var applyValidation = function($scope) {
   if(validatePasscode($scope.passcode)) {
      // success animation
   } 
   else {
      // failure animation
   }
}

这是我的一个使用类似概念的工作小提琴：http://jsfiddle.net/jeremylikness/5KeMw/（我正在过滤而不是验证，但你可以看到油门是如何工作的）和一篇关于它的博客文章：http://csharperimage.jeremylikness.com/2013/10/throttling-input-in-angularjs.html