Javascript；取消设置功能？

Question

我对 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>

非常感谢！

Answer 1

无需取消设置，因为如果窗口大小超过 1024 像素，您可能会再次需要它。这是您的代码的略微优化版本：

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

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

---

更新

看看这是否更有意义（注意，边界设置为 400 像素，因此您需要将 jsfiddle 框缩小到大约 div 大小的两倍）：http://jsfiddle.net/wdey6ngf/

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

---

注意

根据您的最终逻辑的复杂程度，您无需使用 JS，只需使用带有媒体查询的纯 CSS 即可完成：http://jsfiddle.net/rags7zg2/ 它的性能将比 JS 版本好得多。

Answer 2

将所有代码存储在一个函数中，使用将 settimeout 存储在一个变量中，并在 ready 和 onresize 中调用它。然后你可以使用 clear interval if (width

Answer 3

如果是全局函数，可以这样重新定义：

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