Angular 和 Firebase 中的 3 种方式绑定导致输入框滞后

Question

我正在将用户配置文件数据绑定到这样的变量：

// Profile Management
var user = firebase.child('users').child(userID);
$firebaseObject(user).$bindTo($scope, 'user');

这里是 HTML:

<div ng-show="firebaseUser">
    <h1>Your Profile</h1>

    <div class="contentContainer">
        <div class="profilePicture">
            <img src="images/noProfile.png">
        </div>
        <div class="personalInfo">

            <input type="text" ng-model="user.Name" ng-change="user.$save()" type="text" 
                   label="Name" placeholder="Your Name.." name="userName">
            <input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text" 
                   label="Phone" placeholder="Your Phone #.." name="userPhone">

            <label>Email</label>
            {{firebaseUser.password.email}}
        </div>
    </div>
</div>

它工作正常，当我输入配置文件时，它会自动更新 Firebase 数据库，但是存在严重的滞后，如果您输入速度太快，就会非常明显地跳过很多单词，这种情况发生得太多了-可用。

我做错了什么？

Answer 1

用户这个。 ng-model-options="{debounce: {'default': 500} }要触发的范围周期将延迟500ms。您还可以调整它以适应应用程序的使用。加油！

    <input type="text" ng-model="user.Name" ng-change="user.$save()" type="text" 
    ng-model-options="{debounce: {'default': 500} }"   
    label="Name" placeholder="Your Name.." name="userName">

    <input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text" 
    ng-model-options="{debounce: {'default': 500} }"
    label="Phone" placeholder="Your Phone #.." name="userPhone">

Angular 和 Firebase 中的 3 种方式绑定导致输入框滞后

3 Way Binding in Angular & Firebase causing lag in input boxes

javascript

angularjs

firebase