CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
JIGAR
JIGAR

Reputation: 302

Prevent button from being pressed twice

I am new to JavaScript and AngularJS. I have made a demo in that I made simple page navigation with modal, so when I click on a button I am going to another page. But my problem is when I click on that button twice it opens the same page twice. I have used timeout function but I don't know why it is not working on my demo, my code is as below.

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;">

Upvotes: 3

Views: 473

Answers (2)

Ran Sasportas
Ran Sasportas

Reputation: 2266

you really shouldnt use jquery selectors in your controllers.

you should try the angular declarative way instead -

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;">

notice how i use the ng-disabled directive instead of jquery manipulations.

good luck.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

setTimeout wouldn't modify the scope, because it's a native JavaScript function, which will run outside AngularJS context, and the the code which runs outside AngularJS context which is changing AngularJS scope will not reflect on the UI until you run the digest cycle manually.

So instead of using setTimeout you should use $timeout which will run a digest cycle for you.

Another reason behind the user is able to click button twice is you have 2000ms (2sec) of timeout which is too much; reduce that as you want will make an immediate effect.

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

Upvotes: 1

Related Questions