2017-03-02 139 views
1

我有一個功能,我必須只運行一次,如果達到特定的寬度。jQuery在窗口調整大小隻運行一次功能

功能是用於轉表(帶行列)只能在移動

我需要什麼:

1. ON LOAD 
a. if width <992 run transposeTable (mobiles) 
b. if width> 992 do nothing 

2. ON RESIZE 
a. if width <992 run transposeTable ONLY ONCE BUT if loaded page has a smaller width than 992px do nothing (see 1) 
b. if width> 992 run transponseTable ONLY ONCE BUT if loaded page has a width greater than 992px to nothing (see 1) 

這裏的解決方案(有一些修改)由於@Olaf Nankman

var transposed = "desktop"; 
$(document).ready(function(){ 
    if($(window).width() < 992){ 
     transposed = "mobile" 
     transposeTable(); 
    }else{ 
     transposed = "desktop" 
    } 
}) 
$(window).resize(function(){ 
    if($(window).width() < 992 && transposed != "mobile"){ 
     transposed = "mobile" 
     transposeTable(); 
    } 

    if($(window).width() > 992 && transposed != "desktop"){ 
     transposed = "desktop" 
     transposeTable(); 
    } 
}) 
+0

什麼是做工精細在'if'和'else'上調用'transposeTable()'的用法?你現在面臨什麼問題? –

+0

'var isTransposed = false;''function transposeTable(){if(isTransposed)return; isTransposed = true; ...' –

回答

1

您必須存儲您已經稱爲transposeTable的func重刑,你應該轉表到桌面與其他功能... 例如:

// Create 2 apart functions, one for mobile, one for desktop 
function transposeTableMobile(){ 
    // Transpose to mobile 
} 
function transposeTableDesktop(){ 
    // Transpose to desktop 
} 

// Create a variable to check if already transposed 
var transposed = "desktop"; 
$(document).ready(function(){ 
    // On page load 
    // Transpose the table 
    // Since this function runs only once, 
    // we don't need to check if the table 
    // is transposed 
    if($(window).width() < 992){ 
     transposed = "mobile" 
     transposeTableMobile(); 
    }else{ 
     transposed = "desktop" 
     transposeTableDesktop(); 
    } 
}) 
$(window).resize(function(){ 
    // On page resize 
    // We check if the table is transposed to mobile, 
    // if not, but should be, transpose it and store that 
    // we transposed the table 
    if($(window).width() < 992 && transposed != "mobile"){ 
     transposed = "mobile" 
     transposeTableMobile(); 
    }else if(transposed != "desktop"){ 
     transposed = "desktop" 
     transposeTableDesktop(); 
    } 
}) 
0

如果這可以幫助,我需要

var x; 
 
$(window).resize(function() { 
 
    if ($(this).width() <= 600 && (x === 2 || x === undefined)) { 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: small<br/>'); 
 
    } 
 
    x = 1; 
 
    } 
 
    else if ($(this).width() > 600 && $(this).width() <= 1140 && (x === 1 || x === 3 || x === undefined)){ 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: medium<br/>'); 
 
    } 
 
    x = 2; 
 
    } 
 
    else if ($(this).width() > 1140 && (x === 2 || x === undefined)){ 
 
    if(x !== undefined){ 
 
     //function here 
 
     $("body").append('size: large<br/>'); 
 
    } 
 
    x = 3; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>