Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение размера окна (https://javascript.ru/forum/misc/30323-izmenenie-razmera-okna.html)

FoxTrix 31.07.2012 19:11

Изменение размера окна
 
Здравствуйте!
Подскажите можно ли как-то отловить событие окончания изменения размера окна?
А то у меня функция должна запускаться после изменения размера, а при
window.onresize = resize

она запускается во время изменения размера

shkoder 31.07.2012 19:30

Можно попробовать вот так
var resize = function(e){
  console.log(e);
};
(function(){
var time;
window.onresize = function(e){
  if (time)
    clearTimeout(time);
  time = setTimeout(function(){
    resize(e);
  },1000);
}
})();

т.е. вызов вашей функции происходит через секунду после возникновения события resize, но каждое новое событие сбрасывает таймер снова на 1 секунду, при этом вызова функции не происходит, а как только каждое новое событие перестанет сбрасывать таймер, пройдет секунда и произойдет вызов вашей функции.
Грубо говоря как только вы перестанете изменять размеры окна, через секунду после этого произойдет вызов вашей функции. Можно и меньший интервал сделать. Но это при всем при том, что вас вообще устраивает наличие небольшой задержки.

FoxTrix 31.07.2012 20:59

shkoder,
спасибо, так работает, но возникла проблемка:
я переделал под себя, получилось так
(function()
{
	var time1;
	window.onresize = function(e)
	{
  		if (time1)
    		clearTimeout(time1);
  		time1 = setTimeout(function() {var intervalID = window.setInterval(correct, time);},700);
	}
})();

в функции correct у меня идёт проверка условия, если верно выполняются действия, если нет
clearInterval(intervalID);


Но! При запуске через
time1 = setTimeout(function() {var intervalID = window.setInterval(correct, time);},700);

сброс не срабатывает =(
из-за чего это может быть?

Deff 31.07.2012 21:05

FoxTrix,
window.setInterval(correct, time) параметры жирным - должны быть либо глобальными - либо явно преданы в функцию

FoxTrix 31.07.2012 22:02

Deff,
correct - функция
time1 = setTimeout(function(correct, time) {var intervalID = window.setInterval(correct, time);},700);

так просто не работает,
time1 = setTimeout(function(time) {var intervalID = window.setInterval(correct, time);},700);

так тоже самое что и без time

Deff 31.07.2012 22:08

FoxTrix,
Вы чот не то делаете - дайте кусок Вашего скрипта вместе означимыми параметрами в текущем Вашем коде(ничо не меняя)

FoxTrix 31.07.2012 22:14

Deff,
var time = 1000;
		
var intervalID = window.setInterval(correct, time);
function correct()
{
	var widthSlide;
	var book1 = document.getElementById('book1').offsetLeft;
	var book2 = document.getElementById('book2').offsetLeft;
	var book3 = document.getElementById('book3').offsetLeft;
	var book4 = document.getElementById('book4').offsetLeft;
	if(условие)
	{
		действие
	}
	else
	{
		clearInterval(intervalID);
		setTimeout(width, 100);
	}
}
		

(function(time)
{
	var time1;
	window.onresize = function(e)
	{
  		if (time1)
    		clearTimeout(time1);
  		time1 = setTimeout(function(time) {var intervalID = window.setInterval(correct, time);},700);
	}
})();

shkoder 01.08.2012 01:26

FoxTrix, расскажите - как оно должно работать
var time = 1000;
(function(time){
    console.log(time);
})();

практически такой же эффект, что и
var time = 1000;
(function(){
    var time;
    console.log(time);
})();

>>> indefinded
зачем вы в объекте вызова функции (function(){})(); объявляете time. По сути интерпритатор в цепочке объектов вызова найдет time равный undefined
либо передавайте его так
(function(time){
// ...
})(time);

т.е. когда предполагается, что значение time в дальнейшем будет меняться, но именно тут вам нужно именно первоначальное значение, например:
var time = 1000;
(function(time){
    setTimeout(function(){
        console.log(time);
    },1000);
})(time);
time = 100500;

>>> 1000
и если наоборот
var time = 1000;
(function(){
    setTimeout(function(){
        console.log(time);
    },1000);
})();
time = 100500;

>>> 100500
т.е. смотря что нужно.

setTimeout(function(time) {var intervalID = window.setInterval(correct, time);},700);

что вы делаете?
во первых: function(time) {... опять объявляете time и опять он undefined. Сам же setTimeout не передает вам в ваш колбэк никаких параметров т.е. в вашем случае time , зачем так писать

var intervalID = window.setInterval(correct, time);

вы не меняете значение переменной вы меняете ссылку на объект, но сам объект остается.
пример:
var a = setInterval(function(){ console.log(1); },1000);
a = setInterval(function(){ console.log(2); },1000);

>>>1
>>>2
>>>1
>>>2
...
иными словами в вашем случае при каждом resize у вас новый window.setInterval(correct, time); , при наличии предыдущих

А вообще не очень понятно, что ваш код должен делать, лучше расскажите

FoxTrix 01.08.2012 04:26

shkoder,
(function(time)
{
	var time1;
	window.onresize = function(e)
	{
  		if (time1)
    		clearTimeout(time1);
  		time1 = setTimeout(function(time) {var intervalID = window.setInterval(correct, time);},700);
	}
})();

это просто тесты, я в JS 4 дня, и знания мои бессистемны, читал-узнавал только то, что нужно для конкретной задачи
сейчас выглядит так
(function()
{
	var time1;
	window.onresize = function(e)
	{
  		if (time1)
    		clearTimeout(time1);
  		time1 = setTimeout(function() {intervalID = window.setInterval(correct, time);},700);
	}
})();

у меня есть скрипт при котором я могу таскать мышкой div'ы
эта функция включается при onMouseUp чтобы проверить не наехал ли один div на другой, если наехал - происходит корректировка до тех пор пока наездов не останется

PS: Спасибо всем за помощь, всё получилось!


Часовой пояс GMT +3, время: 11:54.