Javascript；取消设置功能？

Posted 2023-02-24

【中文标题】Javascript；取消设置功能？

【英文标题】：Javascript; unset a function?

【发布时间】：2015-02-20 10:08:22

【问题描述】：

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

非常感谢！

【问题讨论】：

为什么要“取消设置”该功能？如果您想再次启用它，您需要添加一个侦听器以了解实际宽度（在 resize 事件上）。

【参考方案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 版本好得多。

【讨论】：

这两个 setTimeout 块有什么区别？

谢谢。我猜你有一个 太多正确的？我试过你的代码。文档就绪功能正在工作，但调整大小功能却没有。我想这是合乎逻辑的，因为在将屏幕大小调整到 10424 以下时，这个函数没有任何反应？调整到1024以下后如何让边距消失？

@RobbertT 是的，修复了那个支架。在第一个 if 块中，您设置在更大窗口的情况下会发生什么 - 目前，我只是使用原始边距，但您可能应该使用我给您的方法将其调整为您自己的喜好。

@RobbertT 我刚刚给你写了一个更简单的例子，展示它是如何双向工作的。

@Shomz;谢谢。我确实“了解”正在发生的事情，但是当我应用它时，rightCol2 div 的高度不适用于 leftCol2 的高度和/或反之亦然。它只有一个固定的高度。这是不可行的，因为 div 的高度每次和每个站点都不同。此外，我实际上确实喜欢（我猜:)）取消设置函数然后将大小调整到 1024 以下，因为当我在屏幕低于 1024 时使用 js 时，div 不会随着内容而拉伸（由于调整大小而变得更长）。见这里：goo.gl/UA7WQ6。当我不使用 js 时，div 会拉伸。请帮助

【参考方案2】：

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

【讨论】：

您好，非常感谢您的回复。我想明白你在说什么，但很抱歉我并不完全：) JS 对我来说真的很新。此代码是我的主题文件中存在的一些默认代码。无论如何，如何将它存储到一个函数中。另外，如何使用明确的间隔？非常感谢！

【参考方案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; 

【讨论】：

好吧，他不能避开他们吗？ :D

您好，感谢您的回复。这是行不通的。我很抱歉; javascript对我来说真的很新。我试过：if(width < 1024) window.myFunction = function() return false; 没有用。有什么想法吗？

好吧，我不是说你应该使用 actual 名称 myFunction，这只是一个例子 :D :D

@user2393256：呸，我不太关心JS，所以我习惯用其他方式做事。

这当然行不通。您刚刚创建了另一个匿名函数，它什么都不做，而不是“撤消”您的函数。你为什么不设计你的第一个函数，让它只在它应该触发的时候触发，而不是试图通过修补来扭转它？ @Lawrence 我也不是，这也是我尽量避免使用 JS 的原因之一。但恐怕我不能永远这样做