Question

我希望只在浏览器大于640px时才调用函数。到目前为止，我有以下内容，当屏幕宽度大于640px时成功加载函数，但我面临的问题是，当浏览器宽度回到640px以下时，函数是仍然活跃。在我的特定场景中，我不希望在较小的显示器上加载函数，因此我试图使用下面的代码调用它。当浏览器在640px下重新调整大小时，我怎么能以某种方式删除/销毁该功能？

<script> 
    function someFunction() {
     // .. does something when the browser width is greater than 640px
    }

    (function($){
          //detect the width on page load and load the function
          $(document).ready(function(){
             var current_width = $(window).width();

               if(current_width > 640){
                 someFunction();
               }
            }
          });

          //update the width value when the browser is resized
          $(window).resize(function(){
            var current_width = $(window).width();

            if(current_width > 640){
                someFunction(); 
            }

          });

        })(jQuery);
</script>

这是迄今为止我所拥有的帮助的完整jsFiddle示例。 http://jsfiddle.net/7Dqna/26/

我正在实现一个粘性侧边栏，当它碰到浏览器的顶部时会滚动页面，但我试图以更小的屏幕尺寸关闭该功能（想想移动设备）。

它在页面刷新时有效，但是如果你使浏览器窗口变大，那么更小（在jsFiddle示例中小于400px）菜单仍然由函数给出CSS。所以我猜它没有拿起调整大小的东西。

Answer 1

为什么不将宽度尺寸检查放入函数中，如果尺寸不是至少640则从中返回？ e.g。

var jWindow = $(window);

jWindow.resize( function() {
    someFunction();
});

function someFunction(){
    if ( jWindow.width() < 640 ){ return; }
    // do stuff here
}

或者，您可以window.someFunction = function(){ return; }

Answer 2

我可以通过两种方式思考：

创建一个将unSomeFunction工作的someFunction。
在someFunction内检查一个布尔标志，以了解窗口的大小。

Answer 3

由于$(window).resize()处理程序而发生这种情况。如果您只想在页面加载时执行此逻辑，则只需在文档就绪时执行它并删除$(window).resize()处理程序。

Answer 4

$(document).ready(function(){
     $(window).on('load resize', ifWidth);

     function ifWidth() {  
         var W = $(window).width();
         if(W > 640){
             someFunction();
             $(window).off('resize', ifWidth);
         }
     }

     function someFunction() {
         // .. does something when the browser width is greater than 640px
     }
});

如何在满足某个条件时删除之前调用的函数？

4 个答案: