Question

In this example here，我正试图让H1标签在移动模式下表现得像一个可点击的按钮。当它返回桌面模式时，我需要确保按钮不再可点击。

当页面最初以“移动模式”加载时，该按钮可正常工作，以确保在移动模式下，该按钮仅在每次单击时触发。然而，在调整大小后，它1.不解除点击，并且2.它似乎再次发射多次。

我确定我这样做不正常或效率低下。欢迎任何其他更好的方法！

这是我的代码：

<html>
<head>
<style type="text/css">
.mobile-mode { background: pink; }
.mobile-mode h1 { background: yellow; padding: 10px; text-align: center; font-size: 16px; line-height: 20px; cursor: poi
</style>
<script type="text/javascript" src="/_jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/_jquery/jquery.debouncedresize.js"></script>
<script type="text/javascript" src="/_jquery/jquery.throttledsize.js"></script>
<script type="text/javascript">
$(window).bind("debounced", function() {
        var viewportWidth = $(window).width();
        $('.v-width span').html(viewportWidth);
        if ( viewportWidth < 640 ) {
                $('.device span').html('mobile');
                $('body').addClass('mobile-mode');
                $('h1').click(function() {
                        $('.results').append('<li>Hey!</li>');
                });
        } else {
                $('.device span').html('desktop');
                $('body').removeClass('mobile-mode');
                $('h1').unbind();
        }

});
</script>
</head>
<body>

<div class="v-width">viewport width: <span></span></div>

<div class="device">device: <span></span></div>

<h1>Contextual Header Button</h1>

<ol class="results"></ol>

</body>
</html>

Answer 1

我是个白痴：我把这个功能误称为“去抖”，当时我应该把它称为“debouncedresize”。

jQuery Debounce调整大小

1 个答案: