Angualrjs中使用$interval倒计时,bind重复调用?

oasis3322 发布于 2016/09/05 16:56
阅读 482
收藏 0

最近做项目用到倒计时,但发现使用$interval实现后,页面函数会跟随时间重复调用,麻烦各位帮忙看下:

HTML 代码


<body ng-app="app" ng-controller="testCtrl">
    <div ng-repeat="data in items">
        {{data.name}}
        <span ng-bind="textBt(data.price)">testBt</span>
    </div>
    <a href="javascript:" ng-bind="paracont">获取验证码</a>
</body>
JS



<script>
        var app = angular.module('app', []);
        app.controller('testCtrl', function ($scope, $interval) {

            $scope.items = [
                {
                    name: "雷柏",
                    quantity: 1,
                    price: 199.00
                },
                {
                    name: "雷柏",
                    quantity: 1,
                    price: 139.00
                },
                {
                    name: "权威教程",
                    quantity: 2,
                    price: 84.20
                }
        ];

            $scope.paracont = "获取验证码";
            var second = 60,
            timePromise = $interval(function () {
                if (second <= 0) {
                    $interval.cancel(timePromise);
                    timePromise = undefined;
                    second = 60;
                    $scope.paracont = "重发验证码";


                } else {
                    $scope.paracont = second + "秒后可重发";
                    second--;
                }
            }, 1000);

            $scope.textBt = function (price) {
                console.log("重复调用");
            };
        });
    </script>
在Console 中可以看到textBt跟随倒计时重复调用!


加载中
0
您的好友
您的好友

就是这样的 angular使用的是脏检查  页面有数据刷新的时候需要重新读取页面相关数据来更新页面

ng-bind是绑定数据  每次interval后angular需要更新页面   所以会重复读取所有的数据 包括$scope.items也会被重新读取   lz这里是直接用函数返回值  所以函数也会重复被调用  

返回顶部
顶部