Javascript;取消设置函数

Javascript; unset a function?

本文关键字：函数 设置 取消 Javascript      更新时间：2023-09-26

我对javascript很陌生。我有这个功能，我想在屏幕尺寸小于 1024 时取消设置它。我有两个功能：文档就绪功能和窗口调整大小功能。将屏幕大小调整到 1024 以下时，我希望取消设置该功能。如何管理？

这是我的代码

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
jQuery(document).ready(function($) {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width > 1024) {
    setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();
        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 80) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
    }
});

$(window).resize(function() { //Fires when window is resized
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width < 1024) {
//I'd like the margin function to be unset.
    }
    else {
        setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();
        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 80) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
    }
});
</script>

非常感谢！

无需

取消设置它，因为如果窗口大小增加到 1024px 以上，您可能需要再次使用它。下面是代码的略微优化版本： 

function handleMargins() {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 1024) {
        setTimeout(function () {
            var lcol_height = $("#leftCol2").height(); // use original margin
            var rcol_height = $("#rightCol2").height();
            if (rcol_height > lcol_height) $("#leftCol2").css('height', (rcol_height - 80) + 'px');
            else $("#rightCol2").css('height', lcol_height + 'px');
        }, 500);
    } else {
        setTimeout(function () {
            var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
            var rcol_height = $("#rightCol2").height();
            if (rcol_height > lcol_height) $("#leftCol2").css('height', (rcol_height - 80) + 'px');
            else $("#rightCol2").css('height', lcol_height + 'px');
        }, 500);
    }
}
jQuery(document).ready(handleMargins);
$(window).resize(handleMargins);

除了更具可读性之外，现在当您第一次打开页面时执行相同的代码并调整大小(想象一下，如果窗口最初小于 1024px，您的原始代码会发生什么(。

更新

看看这是否更有意义(注意，边界设置为 400px，所以你需要将那个 jsfiddle 框切成大约两倍的div 大小(：http://jsfiddle.net/wdey6ngf/

我已经简化了你的逻辑和一切，只是想向你展示它是如何工作的。

注意

根据最终逻辑的复杂程度，您可以使用不使用JS来完成此操作，只需使用带有媒体查询的普通CSS：http://jsfiddle.net/rags7zg2/它将比JS版本执行得更好。

将所有代码存储在函数中，在变量中使用存储 settimeout，并在 ready 和 onresize 中调用它。然后，您可以使用清除间隔if(宽度<1024(。

如果它是一个全局函数，你可以像这样重新定义它：

window.myFunction = function() {
  return false;
}

但是你显然不能用匿名函数来做到这一点。因此，首先提取您的函数：

function myResizer()
{
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width > 1024) {
    setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();
        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 80) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
    }
}

然后使用此函数最初将其设置为ready函数：

jQuery(document).ready(myResizer)

稍后，当您需要丢失该功能时，只需不带任何内容即可覆盖它：

jQuery(document).ready(function($) { return false; }
相关文章：