Javascript 在输入show div一段时间后

我有一个场景，当用户提供输入时，我需要显示一个div

当用户连续更改输入值时，必须显示div，当用户在5秒左右停止提供输入时，必须隐藏div

Ctrl:

    function MainCtrl($scope,$timeout) {
  $scope.appear = false;
  $scope.showDiv = function() {
    debugger;
    $scope.appear = true;
  }
  $scope.$watch('appear',
    function(newValue, oldValue) {
     if(newValue && newValue===true){
        $timeout(function(){
          $scope.appear=false;
        }, 5000);

     } 
    }
  );
}

html:

名称：

内容

我在这里面临的问题是，当我在某个时间点不断地向div提供输入时，它会被隐藏并再次出现

但是我需要显示div，直到输入被提供，当用户在5秒后停止提供任何输入时，它应该消失

---

如果您有任何帮助，我们将不胜感激。

我已对您的plunkr进行了一些更改，请查看此链接

---

我得到了以下代码：

$scope.showDiv = function () {
    alert(1);
    $('#divShow').show();
    setTimeout("$('#divShow').hide();", 5000);
}

将其写入控制器，并将该

“divShow”

id提供给div并删除ng show东西

---

这对我很有效，希望能帮助您。

您应该清除超时：

angular.module('plunker', []).controller('MainCtrl',function($scope,$timeout) {
    $scope.appear = false;

    $scope.timerId;
    $scope.showDiv = function() {

        if($scope.timerId!=undefined){
        clearTimeout($scope.timerId);
    }
    $scope.appear = true;
    $scope.timerId = $timeout(function(){
       $scope.appear=false;
    },5000);  
  }
});

$scope.showDiv = function () {
    alert(1);
    $('#divShow').show();
    setTimeout("$('#divShow').hide();", 5000);
}

angular.module('plunker', []);

function MainCtrl($scope,$timeout) {
  var timeout;
  $scope.appear = false;
  $scope.showDiv = function() {
    // debugger;
    $scope.appear = true;

    if(timeout) {
      console.log('timeout')
      $timeout.cancel(timeout); 
    }

    timeout = $timeout(function(){
      $scope.appear=false;
    }, 5000);
  }
}