выполнить код js при изменении точки останова окна

Question

У меня есть код js, который я хотел бы запускать только тогда, когда окно имеет «большой» размер экрана, скажем 900px. Я хочу использовать его как медиа-запрос в css, поэтому код может включать и выключать в определенной точке прерывания. Поэтому я предполагаю, что мне нужно какое-то условие с функцией изменения размера, как это:

$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    if (viewportWidth < 900) { 

    } 
}); 

А затем поставить код, который я хочу, чтобы выполнить между фигурными скобками, но он не работает.

Это код, который я хотел бы выполнить, когда экран меняется на 900px:

function makeRowDiv(buildRow) { 
     var row = document.createElement('div'); 
     row.className = 'row expanded row-spacing'; 
     for (var i = 0; i < buildRow.length; ++i) { 
     row.appendChild(buildRow[i]); 
     } 
     return row; 
    } 

    window.onload = function() { 
     var work = document.getElementById('work'), 
      items = work.getElementsByTagName('div'), 
      newWork = document.createElement('div'); 
     var buildRow = [], 
      count = 0; 
     for (var i = 0; i < items.length; ++i) { 
     var item = items[i]; 
     if (item.className.indexOf('columns') == -1) { 
      continue; 
     } 
     // Extract the desired value. 
     var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className), 
      delta = parseInt(matches[1], 10) + parseInt(matches[2], 10); 
     if (count + delta > 12 && buildRow.length != 0) { 
      newWork.appendChild(makeRowDiv(buildRow)); 
      count = 0; 
      buildRow = []; 
     } 
     buildRow.push(item.cloneNode(true)); 
     count += delta; 
     } 
     if (buildRow.length != 0) { 
     newWork.appendChild(makeRowDiv(buildRow)); 
     } 

     // Replace work with newWork. 
     work.parentNode.insertBefore(newWork, work); 
     work.parentNode.removeChild(work); 
     newWork.id = 'work'; 
    }; 

Я предполагаю, что его можно так с

Answer 1

Попробуйте это:

\t $(window).on('resize',function() { 
 
     var $width = $(window).width(); 
 
     console.log($width); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

вы можете использовать медиа-запросы в JavaScript, а также и использовать его в качестве условия

var mq = window.matchMedia("(max-width: 900px)"); 
if (mq.matches) { 
    // window width is less than 900px 
} else { 
    // window width is more than 900px 
} 

Answer 3

Вы могли бы сделать что-то вроде этого

function makeRowDiv(buildRow) { 
 
     var row = document.createElement('div'); 
 
     row.className = 'row expanded row-spacing'; 
 
     for (var i = 0; i < buildRow.length; ++i) { 
 
     row.appendChild(buildRow[i]); 
 
     } 
 
     return row; 
 
    } 
 
function loadData() { 
 
     var work = document.getElementById('work'), 
 
      items = work.getElementsByTagName('div'), 
 
      newWork = document.createElement('div'); 
 
     var buildRow = [], 
 
      count = 0; 
 
     for (var i = 0; i < items.length; ++i) { 
 
     var item = items[i]; 
 
     if (item.className.indexOf('columns') == -1) { 
 
      continue; 
 
     } 
 
     // Extract the desired value. 
 
     var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className), 
 
      delta = parseInt(matches[1], 10) + parseInt(matches[2], 10); 
 
     if (count + delta > 12 && buildRow.length != 0) { 
 
      newWork.appendChild(makeRowDiv(buildRow)); 
 
      count = 0; 
 
      buildRow = []; 
 
     } 
 
     buildRow.push(item.cloneNode(true)); 
 
     count += delta; 
 
     } 
 
     if (buildRow.length != 0) { 
 
     newWork.appendChild(makeRowDiv(buildRow)); 
 
     } 
 

 
     // Replace work with newWork. 
 
     work.parentNode.insertBefore(newWork, work); 
 
     work.parentNode.removeChild(work); 
 
     newWork.id = 'work'; 
 
    }; 
 
    window.onload = loadData; 
 

 
    window.onresize = function(){ 
 
\t if(window.innerWidth < 900){ 
 
     loadData(); 
 
     makeRowDiv(buildRow) 
 
     } 
 
    }

Предполагая, что вы хотите, чтобы вызвать функцию, которая была добавлена ​​в окне .onload для события изменения размера окна.