$（window）.resize中的函数问题 - 使用jQuery [英] Problem with function within $(window).resize - using jQuery

问题描述

我想使用一个简单的功能在移动设备上隐藏/显示仅内容。

该功能本身非常简单。我在此处使用此代码：

I want to use a simple function to hide/show content only on mobile devices.
The function itself is pretty straightforward. I use this code here for that:

    $('.toggleMobile').click(function() {
        var hideableContent = $(this).parent().find('.hideable');
        hideableContent.slideToggle('medium');
    });

所以...没什么特别的，我知道。

So... nothing fancy, i know.

当我尝试检测浏览器视口时，它变得更加复杂。

我想我通过使用以下几行来处理它（你可能会找到改进方法）：

It gets more complicated as i try to detect the browser viewport.
I think I took care of that by using the following lines (you probably will find ways to improve it):

    function whatMedia() {

        var viewport = $(window).width();
        var mediaType;

        if ( viewport < 767 )
            mediaType = 'mobile';
        else if ( (viewport >= 767) && (viewport < 991) )
            mediaType = 'tablet';
        else
            mediaType = 'desktop';

        return mediaType;
   }

现在我只需要一个仅在视口时触发的功能是手机 （问题可能在这里？）：

Now i just need a function that gets triggered only when the viewport is mobile (maybe the problem is here?):

   function toggleMobile(mediaType) {

        if ( mediaType === 'mobile' ) {
            $('.toggleMobile').click(function() {
                var hideableContent = $(this).parent().find('.hideable');
                hideableContent.slideToggle('medium');
            });
        }
    }

我第一次检查视口时没有问题页面已加载。
我只是使用这个（非常简单的代码）：

I have no problem checking for the viewport the first time the page is loaded. I just use this (very simple bit of code):

    // Check media type and activate accordingly
    var mT = whatMedia();
    toggleMobile(mT);

到目前为止一切顺利。现在来了一个有趣的部分：

我希望能够检测用户是否调整浏览器窗口大小并激活/取消激活 toggleMobile（）相应的功能。。

So far so good. Now comes the fun part:
I want to be able to detect if a user resizes the browser window and activate/deactive the toggleMobile() function accordingly..

我可以这样做：

    $(window).resize(function() {
        var mT = whatMedia();
        toggleMobile(mT);
    }

正如您可能已经知道的那样，这个 $（窗口）.resize 的东西使Webkit和其他浏览器有点疯狂，只要用户调整窗口大小，就重复这个功能。

这取决于你对它的看法是好还是坏。

我个人不喜欢不希望这种情况发生，所以我使用我在论坛上找到的这个功能：

As you perhaps already know, this $(window).resize thing makes Webkit and other browsers go a bit crazy, and repeat the function as long as the user resizes the window.
This is good or bad depending on your take on it.
I personally don't want this to happen, so i use this function i found on the forums:

    var waitForFinalEvent = (function () {

        var timers = {};

        return function (callback, ms, uniqueId) {
            if (!uniqueId) {
                uniqueId = "Don't call this twice without a uniqueId";
        }
            if (timers[uniqueId]) {
                clearTimeout (timers[uniqueId]);
            }
            timers[uniqueId] = setTimeout(callback, ms);
        }

   })();

我的调整大小事件如下所示：

My resize event looks like this:

    $(window).resize(function() {
        waitForFinalEvent(function() {
            var mT = whatMedia();
            toggleMobile(mT);
        }, 500, '1');         
    }

这肯定确实在调整大小时延迟了浏览器窗口的计算，但我无法使其内部的功能正常工作。

我不知道问题是什么：（

Th函数被触发两次或多次，即使视口被识别为 desktop 或 tablet 。

This certainly does delay the calculation of the browser window on resize but i can't make the function inside it work.
I don't know what the problem is :(
Th function gets triggered two or more times, and even when the viewport is recognized as desktopor tablet.

推荐答案

在togglemobile功能中，你只需注册点击事件，但没有别的，如果你想触发它就可以做到

In the togglemobile function, you just register the click event but nothing else, if you want to trigger it you could do

   $('.toggleMobile').click(function() {
        var hideableContent = $(this).parent().find('.hideable');
        hideableContent.slideToggle('medium');
   }).trigger('click');

这会触发click事件并运行代码，或者你可以立即隐藏元素。

this would trigger the click event and run the code, alternatively you could hide the element immediately instead.

编辑：我会稍微修改一下我的答案。
首先我们注册click元素的click事件，同时slideToggle内容：

I'll revise my answer a bit. First we register the click event for the element that while slideToggle the content:

   $('.toggleMobile').click(function() {
        if(whatMedia() === "mobile") {
           var hideableContent = $(this).parent().find('.hideable');
           hideableContent.slideToggle('medium');
        }
   });

然后在 toggleMobile（mt）; 功能我们现在隐藏内容，如果大小超过移动媒体

then in the toggleMobile(mt); function we now hide the content if the size goes over to mobile media

function toggleMobile(mediaType) {

    if ( mediaType === 'mobile' ) {
        var hideableContent = $(".toggleMobile").parent().find('.hideable');
        hideableContent.slideToggle('medium');
    }
}

如果我明白，你想要什么？

this is if i understand, what you want?

我知道这可能是@ sje397的意思。

I see that this is probably what @sje397 meant.

这篇关于$（window）.resize中的函数问题 - 使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！