防止按钮被按下两次

Question

我是JavaScript和AngularJS的新手。 我做了一个演示，我用模态进行了简单的页面导航，所以当我点击一个按钮时，我将转到另一个页面。 但我的问题是，当我点击该按钮两次时，它会打开同一页两次。 我使用了超时功能，但我不知道为什么它不能用于我的演示，我的代码如下。

JavaScript的

$scope.foo = function() {
        if ($scope.filterflg !== "1" ) {
            $scope.filterflg = "1";
             $scope.disabled = true;


            gallery.pushPage("filter.html", {
                params: FkCategory
            });

            $timeout(function() {
                console.log("====timeout occured===");
                $scope.filterflg = "0";
                  $scope.disabled = false;
            }, 3000);
        }
    };

HTML

   <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="foo();" ng-disabled="disabled"
                  style="border: none; padding: 0 5px 0 0;">

Answer 1

setTimeout不会修改范围，因为它是一个本机JavaScript函数，它将在AngularJS上下文之外运行，并且在AngularJS上下文之外运行的代码在更改AngularJS scope将不会反映在UI上，直到您手动运行摘要周期。

因此，您应该使用$timeout来代替使用setTimeout ，这将为您运行摘要周期。

用户背后的另一个原因是能够点击两次按钮，你有超过2000毫秒（ 2sec ）的超时时间; 减少你想要的将立即生效。

$timeout(function() {
    disabled = false;
}, 0);

Answer 2

你真的不应该在你的控制器中使用jquery选择器。

你应该尝试角度声明的方式 -

JavaScript的

$scope.foo = function() {
   $scope.disabled = true;
    gallery.pushPage("filter.html", {params:$scope.filteid});

$timeout(function() {
    console.log("======time out occured======");
    $scope.disabled = false;
}, 0);
};

HTML

   <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="foo();" ng-disabled="disabled"
                  style="border: none; padding: 0 5px 0 0;">

注意我如何使用ng-disabled指令而不是jquery操作。

祝好运。