我正在开发一个响应式网站,其中包含一组特定的jQuery函数,用于桌面布局和移动布局。如果它们同时处于活动状态,它们会相互干扰。
通过检查window.width,我只能在页面加载时提供正确的函数集,并且我想在window.resize上执行相同的操作。
我在这里设置了一个精简的小提琴:http://jsfiddle.net/b9XEj/
现在存在两个问题:
window.resize函数应按以下方式运行:
在上面的小提琴示例中,您总会看到一行,显示“移动功能处于活动状态”或“桌面功能处于活动状态”。
此时我有点失落,但我尝试使用
if ($.isFunction(window.mobileFunctions))
检查功能是否已经存在,但我似乎无法在不破坏整体功能的情况下使其工作。以下是该代码的小提琴:http://jsfiddle.net/nA8TB/
提前考虑,这种尝试也不会考虑是否存在不正确的功能集。所以,我真的希望有一种方法可以用更简单的方式来解决这个问题。
非常感谢任何帮助!
答案 0 :(得分:2)
以下征服了2个问题。 resize
每秒触发很多次,因此使用超时会修复它不断触发代码。它还会添加一个检查以查看相同的大小是否有效,如果
$(document).ready(function() {
var windowType;
var $wind = $(window);
var desktopFunctions = function() {
$('body').append('<p>Desktop functions are active</p>');
}
var mobileFunctions = function() {
$('body').append('<p>Mobile Functions are active</p>');
}
var mobileCheck = function() {
var window_w = $wind.width();
var currType = window_w < 940 ? 'mobile' :'desktop';
if (windowType == currType) {
$('body').append('<p>No Type Change, Width= '+window_w+'</p>');
return;
} else {
windowType = currType;
}
if (windowType == 'mobile') {
mobileFunctions();
} else {
desktopFunctions();
}
}
mobileCheck();
var resizeTimer;
$wind.resize(function() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(mobileCheck, 300)
});
});
DEMO:http://jsfiddle.net/b9XEj/1/
如果没有看到两组功能之间的真实世界差异,就很难提供如何阻止它们发生冲突的问题。一种可能性是检查函数中的windowType
答案 1 :(得分:1)
您可以通过添加延迟mobileCheck
来阻止连续发射。使用setTimeout
和checkPending
布尔值。
var checkPending = false;
$(window).resize(function(){
if (checkPending === false) {
checkPending = true;
setTimeout(mobileCheck, 1000);
}
});
见这里:http://jsfiddle.net/2Q3pT/
修改强>
就第二个要求而言,您可以使用此模式创建或使用现有模式:
mobileFunctions = mobileFunctions || function() {
// mobile functions active
};