使用Angularjs时文本打印的延迟

Delay in Text Printing using Angularjs

本文关键字：延迟 打印 文本 Angularjs 使用      更新时间：2023-09-26

如何在Angularjs中延迟函数的调用?我制作了一个简单的表单，有两个文本框，分别表示名字和姓氏。包含一个提交按钮，它连接名字和姓氏并显示全名。我想每当这个提交按钮被点击，全名必须在5秒后显示。如何实现此延迟?

我的HTML代码如下: 
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
    <script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    First Name : <input type="text" ng-model="fname"/> <br>
    Last Name : <input type="text" ng-model="lname"/><br>
    <button ng-click="clk()" > SUBMIT </button><br>
    Full Name : {{fullName}}
</body>
</html>

我的控制器看起来像

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
  $scope.fname="";
  $scope.lname="";
  $scope.fullName="";
  $scope.clk = function(){
    $scope.fullName = $scope.fname + " " + $scope.lname ;
  };
});

使用$timeout来延迟函数内部的代码执行。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
  $scope.fname="";
  $scope.lname="";
  $scope.fullName="";
  $scope.clk = function(){
    $timeout(function(){
      $scope.fullName = $scope.fname + " " + $scope.lname ;
    },5000)
  };
});

我使用了angularJs中的$timeout。

$scope.clk = function(){
      $timeout(function(){
       $scope.fullName = $scope.fname + " " + $scope.lname ;
      },5000);
  };

小提琴来了

相关文章：