Выполнять функцию только при определенном размере окна

Question

Пытается создать предупреждение «привет мир», которое срабатывает всякий раз, когда окно браузера достигает 1200 пикселей.

Пример: Переход от 1220 до 1100 пикселей: срабатывает событие один раз в 1200. Пример: Переход от 1100 до 1220 пикселей: даже один раз на пожары 1200.

любая помощь будет оценена.

Это то, что я работаю с (по большей части)

window.onresize = function() 
    { 
     if (window.innerWidth = 1199) { 
      //alert ("The size of the window is 1199"); 
      location.reload(); 
      return; 
     } 

    } 

Это очистку кода. Я не верю == или === сделать разницу в этом случае

window.onresize = function() 
    { 
     if (window.innerWidth === 1199) { 
     alert ("The size of the window is 1199"); 
     } 
    } 

Answer 1

Событие resize не запускается так часто, как хотелось бы, чтобы идентифицировать окно, надежно отображающее точную ширину 1199, при изменении размера пользователя.

например.

window.onresize = function() { console.log(window.innerWidth); } 

Чтобы просмотреть зернистость.

Чтобы учесть уведомления о потерях, вы можете обнаружить любое изменение размера порогового значения. Это все еще может пропустить некоторые изменения размера вокруг порога, но должен подобрать совокупное изменение: изменение размера

var thresholdWidth = 1199; 
var previousWidth = window.innerWidth; 
window.onresize = function() { 

    var movedUpThroughThreshold = previousWidth < thresholdWidth && 
    window.innerWidth >= thresholdWidth; 
    var movedDownThroughThreshold = previousWidth >= thresholdWidth && 
    window.innerWidth <= thresholdWidth; 

    if (movedUpThroughThreshold || movedDownThroughThreshold) { 
    console.log("passed threshold", previousWidth, "->", window.innerWidth) 
    } 

    previousWidth = window.innerWidth; 
} 

Совместимость Примечание Вы должны учитывать innerWidth доступность, если вам нужно настроить таргетинг IE8 и может быть морщинами в различных пользовательских агентах, хотя стандарт описывает innerWidth как ширину окна просмотра, включая полосы прокрутки.

Если внутренняя ширина недоступна, вам, скорее всего, потребуется использовать элемент documentElement или body в качестве прокси-сервера для окна просмотра, но вам нужно убедиться, что они заполняют окно просмотра, но не превышают его.

Answer 2

Попробуйте изменить window.innerWidth = 1199 к window.innerWidth === 1199. Я не знаю, поможет ли это, но это стоит того.

Answer 3

Попробуйте

window.onresize = function() 
{ 
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    if (w === 1199) { 
     alert ("The size of the window is 1199"); 
     location.reload(); 
     return; 
    } 

}

Answer 4

В comment вы сказали, что после того, как освежающий изменение размера в порядке. Для этого вам нужен дебютант. Debouncer - это функция, которая проверяет, не произошло ли событие после заданной задержки, и только тогда он запускает обработчик событий, который вы передали для события. Как так:

var oldSide = window.innerWidth - 1200; // Stores positive value, if current size is greater than 1200, else zero or negative 

// This is the debouncer, it delays the execution of the given handler untill user stops resizing 
function debounce(fn, delay) { 
    var delayId, delay = delay || 200; 
    return function() { 
     var scope = this, args = arguments; 
     clearTimeout(delayId); 
     delayId = setTimeout(function() { 
      fn.apply(scope, Array.prototype.slice.call(args)); 
     }, delay); 
    } 
} 

// Here we add the resize listener, notice, that we call the debouncer, and pass our actual handler to that 
$(window).resize(debounce(function (e) { 
    var newSide = window.innerWidth - 1200; 
    // newSide * oldSide is negative, if 1200 is acrossed in either directions during the last resizing 
    if (newSide * oldSide <= 0) { 
     // Window size acrossed 1200 during the last resize, refresh the page 
    } 
    // Window size didn't across 1200 during the last resize, set a new value to oldSide, and keep listening 
    oldSide = newSide; 
})); 

A working demo at jsFiddle (журналы только не утешать, не обновления).

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

Вы также можете обнаружить «границу поперек» в debouncer (сразу после clearTimeout), таким образом, это будет более реальное время, но может иметь пробел в несколько пикселей.

Дебютант, который я использовал здесь, составляет BGerrissen's great answer at SO.