我在网页上使用了一些jQuery来检测哪个菜单选项是最新的，什么时候显示移动菜单等等 - 我几乎只是在尝试一下可能的内容。当我在桌面PC上访问该页面时，代码工作正常，单击时我的移动菜单和标签会立即加载。
当我在移动设备（S5，Android）上查看页面时，显示菜单的加载时间，要更改的选项卡等需要几秒钟，而不是立即。我不太确定这是否取决于我的代码的效率，或者我是否应该使用特定的功能或任何东西。关于什么可能导致这种延迟的任何想法？
$(document).ready(function() {
function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var sortElement = currentSort(getParam('sort'));
var itemElement = currentItem(getParam('items'));
$(sortElement.element).addClass('current');
$(itemElement.element).addClass('current');
function currentSort(value) {
var strElement;
switch(value) {
case 'newest' :
strElement = '#newest';
break;
case 'oldest' :
strElement = '#oldest';
break;
case 'alph_desc' :
strElement = '#desc';
break;
case 'alph_asc' :
strElement = '#asc';
break;
case '' :
strElement = '#newest';
break;
} return {
element: strElement
}
}
function currentItem(value) {
var strElement;
switch(value) {
case '10' :
strElement = '#fewer';
break;
case '15' :
strElement = '#few';
break;
case '50' :
strElement = '#more';
break;
case '' :
strElement = '#few';
break;
} return {
element: strElement
}
}
$('#search a').click(function() {
$('#search').html('<form><input class="nav-search" placeholder="Search" type="text" name="search-query"/><input type="submit" value=" "/></form>');
});
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 1020) {
$('.navigation .container').html('<ul><li class="brand mobile"><a href="/products"></a></li><li class="menu"></li><div class="mobile-menu"><ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul></div></ul>');
$('.mobile-menu').hide();
$('.menu').click(function() {
$('.mobile-menu').slideToggle();
});
} else {
$('.navigation .container').html('<ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li class="brand"><a href="/products"></a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul>');
}
}
checkWidth();
$(window).resize(checkWidth);
});
答案 0 :(得分：0)
我应该首先评论你的问题，但由于我的声誉不够，我会提供答案。您是否尝试使用switch case而不是sortValue和itemValue的if（s）？因为AFAIK，if语句的使用会继续检查每个if case，至于switch case提供了更有效的解决方案。检查this问题。
答案 1 :(得分：0)
只是一些指示
mobileInit（请参阅here和jqm docs）没时间测试并包含许多我永远不会编码的东西，但这应该给你足够的指示：
(function (window, document) {
var search_form, mobile_menu, desktop_menu;
// > don't work with strings, build using documentElement;
// > correct your strings, they are not valid!
search_form = '<form><input class="nav-search" placeholder="Search" type="text" name="search-query"/><input type="submit" value=" "/></form>';
mobile_menu = '<ul><li class="brand mobile"><a href="/products"></a></li><li class="menu"></li><div class="mobile-menu"><ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul></div></ul>';
desktop_menu = '<ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li class="brand"><a href="/products"></a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul>';
// > JQM exposes methods to work with URL, look for $.mobile.path
// > declare methods before they are needed
// helper: get url parameter
function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// helper: get element showing sorting direction
function currentSort(value) {
var snip = value.split("_");
return "#" + (snip[1] || snip[0]);
}
// helper: get element showing number of items
function currentItem(value) {
switch (value) {
case '10': return "#fewer";
case '50': return "#more";
default: return "#few";
}
}
// helper: set menu depending on real-estate available
// ATTENTION: every time you call this you are setting a new binding!!!
function checkWidth() {
var window_size, $container;
window_size = $(window).width();
$container = $('.navigation .container');
if (window_size < 1020) {
$container.html(mobile_menu);
$('.mobile-menu').hide();
$('.menu').click(function() {
$('.mobile-menu').slideToggle(desktop_menu);
});
} else {
$container.html(desktop_menu);
}
}
$(document).on("mobileinit", function () {
var search;
search = document.getElementById("search");
// add classes to sorting and items selectors
$( currentSort(getParam('sort')), currentItem(getParam('items')) ).addClass("current");
// replace link with search form on click
$( search ).on( "click", "a", function () {
search.innerHTML = search_form;
});
// set desktop or mobile menu depending on screen width
checkWidth();
});
}(window, document));
希望能让你走上正轨！
从我所看到的你编码的内容来看，我认为它并不能解释为什么？＆＃34;几秒钟＆＃34;从桌面到移动的差异 - 除非修复你的html strings帮助（传递jshint / jslint也有助于imo ...）。
之后你必须到别处去看看。
一般情况下，请始终牢记移动设备比桌面设备慢，并考虑修改DOM，添加大量点击绑定等等。我通常会在内存中预先增强整个页面并触摸DOM一次（注入它）。在慢速设备上帮助很多。