防止按钮被重复按下

Question

我是一名对JavaScript和AngularJS不太熟悉的新手。我制作了一个演示，其中使用模态框实现了简单的页面导航，当我点击按钮时，会跳转到另一个页面。但我的问题是，当我连续两次点击该按钮时，它会打开两个相同的页面。我已经使用了timeout函数，但我不知道为什么它在我的演示中不起作用，我的代码如下。

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

- JIGAR

---

你可以从按钮中删除 click 事件监听器，方法是在 foo() 中这样做：this.setAttribute('ng-click', '');。 - Andrew Evt

Answer 1

setTimeout 不会修改作用域，因为它是一个原生的 JavaScript 函数，它将在 AngularJS 上下文之外运行，而在 AngularJS 上下文之外运行的代码更改 AngularJS 的 scope 将不会反映在 UI 上，除非您手动运行 digest 循环。

因此，您应该使用 $timeout 代替 setTimeout，它将为您运行 digest 循环。

用户能够连续点击按钮的另一个原因是您设置了 2000 毫秒（2 秒）的超时时间，这太长了；将其缩短将会产生立即效果。

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

- Pankaj Parkar

---

请看我的编辑，仍然不起作用，超时发生但没有达到我想要的！ - JIGAR

你好，我使用了这个链接，但是我真的不知道如何将它应用到我的代码中。将超时设置为按钮单击 - JIGAR

@FireCandy 你需要在你的控制器函数中注入 $timeout 依赖。 - Pankaj Parkar

注入了代码，但是没有达到我的目标..:( - JIGAR

没有任何错误，但我的问题是当我点击那个按钮两次时，同一页会打开，然后当我返回到上一页时，一个模态框会显示并且永远不会消失。 - JIGAR

Answer 2

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

相反，你应该尝试使用Angular声明式的方式 -

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

祝你好运。

- Ran Sasportas

---

你好，请查看我的编辑后的问题，它仍然会被点击两次并跳转到下一页，这不是我想要的...!!! :( 请帮忙。 - JIGAR