Как предотвратить появление новых aside после каждого resize()?

Question

[Юрий]

Есть такой код:

$(document).ready(function() {
    scriptsToggle();
    $(window).resize(scriptsToggle);
});
 
function scriptsToggle() {
    if ($('body').width() > 1200) {
        $('<aside></aside>')
            .appendTo('#wrapper');
    } else {
        $('aside').remove();
    }
}

Если три раза увеличить и уменьшить окно браузера, появиться на странице три блока aside, что я упускаю?

Answer 1

[Александр Цымбал]

ну самый быстрый вариант - просто в функции scriptsToggle() добавить в самом начале инструкцию, которая удалит все ранее созданные aside'ы. Если этих самых aside'ов не так много (до 5-10), то всё будет работать быстро. Т.е. при ресайзе будут удаляться все ранее созданные aside и будет рассчитываться заново - добавлять или нет.

function scriptsToggle() {
    $('#wrapper aside').remove();
    if ($('body').width() > 1200) {
        $('<aside></aside>')
            .appendTo('#wrapper');
    } else {
        $('aside').remove();
    }
}

Answer 2

[Ольга]

Тебе просто нужно поставить флаг

$(document).ready(function() {
    scriptsToggle();
	
    $(window).resize(scriptsToggle);

var flag1200=($('body').width() > 1200)?true:false;

function scriptsToggle() {
    if (($('body').width() > 1200)&&!flag1200) {
        $('<aside></aside>')
            .appendTo('#wrapper');
		flag1200=true;
    } else if (($('body').width() < 1200)&&flag1200){
        $('aside').remove();
		flag1200=false;
    }
}
});

Answer 3

[Тимофей]

У тебя функция отрабатывает не только момент прохождения заданной ширины, а при каждом событии ресайза (то есть много-много-много раз). Например, если ты уменьшаешь мышкой окно браузера с ширины 1100 до 900, то у тебя и будет добавлен aside столько раз,сколько сработает событие.

Comments

[Юрий]

я понял, а как сделать чтобы функция выполнялась только при прохождении 1200px??)