jQuery Run function only once on window resize

Question

I have a function that i have to run only once if specific width is reached.

Function is used to transpose table (columns with rows) only on mobile

What I need:

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)

here's solution (with some modifications) thanks to @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(); } })

What's the use of calling transposeTable() on if and else? and what problem you are facing now? — Guruprasad J Rao
– Guruprasad J Rao, Commented Mar 2, 2017 at 10:59
var isTransposed = false; function transposeTable() { if (isTransposed) return; isTransposed = true; ... — fdomn-m
– fdomn-m, Commented Mar 2, 2017 at 11:06

Samū · Accepted Answer · 2017-03-02 11:15:33Z

You must store that you've already called the transposeTable function, and you should transpose the table to desktop with another function... For example:

// 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(); } })

Zoran Velickovic · Accepted Answer · 2017-07-19 23:59:37Z

If this can help, work fine for my needs

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>

Collectives™ on Stack Overflow

jQuery Run function only once on window resize

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related