在窗口调用中调用相同的函数并调整窗口大小

我有两种不同的函数可以根据屏幕大小调用。我叫他们准备的功能是这样的：在窗口调用中调用相同的函数并调整窗口大小

$(document).ready(function() { 
    var $window = $(window); 
    var $window_width = $(window).width(); 

    if ($window_width < 768) { 
     faq_mobile(); 
    } else { 
     faq(); 
    } 
});

但我想再次打电话给他们上的窗口大小调整事件，因为功能没有那么叫。所以我写了这一点：

$(window).bind('resize', function(e) { 
    window.resizeEvt; 
    $(window).resize(function() { 
     clearTimeout(window.resizeEvt); 
     window.resizeEvt = setTimeout(function() { 
      if ($(window).width() < 768) { 
       faq_mobile(); 
      } else { 
       faq(); 
      } 
     }, 250); 
    }); 
});

但是，这并不正确，因为该功能常见问题和faq_mobile已多次调用，当我调整窗口的工作。这种情况下最好的解决方案是什么？

来源

2017-03-01 Imrul.H

现在有一个反弹是很好的。 'if（window.resizeEvt）{clearTimeout（window.resizeEvt）;}'你应该把它包含在这个条件中，否则它会抛出错误。检查控制台日志。 – Jai

只需将您的代码放入单独的函数中，然后将该函数设置为resize事件处理程序和就绪事件处理程序！ –

你的代码看起来有点奇怪。考虑这个例子

var isMobileView = false; 
 
var isDesktopView = false; 
 

 
function handleView(width) { 
 

 
    if (width < 768 && isDesktopView) { 
 
    
 
     faq_mobile(); 
 
     isMobileView = true; 
 
     isDesktopView = false; 
 
     
 
    } else if (width >= 768 && isMobileView) { 
 
    
 
     faq(); 
 
     isMobileView = false; 
 
     isDesktopView = true; 
 
     
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    
 
    var width = $(window).width(); 
 
    handleView(width) 
 
    
 
}); 
 

 
$(window).resize(function() { 
 
    
 
    var width = $(window).width(); 
 
    handleView(width) 
 

 
})

来源

2017-03-01 10:32:40 disstruct

是的代码有点混乱。谢谢你提到这一点。但是你的解决方案不能解决我的问题。 –

我第一次不明白这个问题。我编辑了我的答案。这应该工作 – disstruct

另一个编辑。现在更易读 – disstruct

function handler() {  // separate the code and wrap it in a function 
    var $window_width = $(window).width(); 

    if ($window_width < 768) { 
     faq_mobile(); 
    } else { 
     faq(); 
    } 
} 

$(handler);     // on load of the document 

$(window).resize(handler); // on resize of the window

如果你想保持resize事件的延迟，然后更改上面这最后一行：

$(window).resize(function() { 
    window.clearTimeout(window.resizeEvt);  // remove previous delay if any 
    window.resizeEvt = setTimeout(function() { // create a new delay 
     handler(); 
     window.resizeEvt = 0; 
    }, 250); 
});

来源

2017-03-01 10:34:50

嗯..感谢大家的帮助。我GOOGLE了一下，找到了一个解决办法。调整大小后，我必须解除在faq和faq_mobile函数中添加的事件。然后再次调用这些函数。这里是修改后的代码:(谢谢@disstruct您的建议）。

$(document).ready(function() { 
    var width = $(window).width(); 
    handleView(width); 
}); 

$(window).bind('resize', function(e) { 
    window.resizeEvt; 
    $(window).resize(function() { 
     clearTimeout(window.resizeEvt); 
     window.resizeEvt = setTimeout(function() { 
      // here i am unbinding the click events which were previously added inside faq and faq_mobile functions. 
      $('.faq-expand, .answer-close').off('click'); 
      var width = $(window).width(); 
      handleView(width); 
     }, 250); 
    }); 
}); 

function handleView(width) { 
    if (width < 768) { 
     faq_mobile(); 
    } else { 
     faq(); 
    } 
}

来源

2017-03-01 10:57:26

在窗口调用中调用相同的函数并调整窗口大小

回答

相关问题