防止按鈕被按下兩次

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操作。

祝好運。