Javascript изменение размера события стрельбы несколько раз, перетаскивая ручку изменения размера

Я надеялся, что этот плагин jQuery будет работать, но это не так:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (старая ссылка была noteslog.com/post/how-to-fix-the-resize-event-in-ie).

Я добавил комментарий на его сайт, но они модерируются, поэтому вы еще не видите его.

Но так или иначе, позвольте мне объяснить мое желание. Я хочу, чтобы событие типа "изменение размера" было запущено, когда пользователь либо приостанавливает изменение размера, либо завершает его изменение размера, а не пока пользователь активно перетаскивает ручку изменения размера окна браузера. У меня довольно сложная и трудоемкая функция OnResizeHandled, которую мне нужно запустить, но не запускать 100 раз только потому, что пользователь расширил окно на 100 пикселей, и событие было выпущено за любой пиксель движения. Я думаю, лучше всего будет обрабатывать его, как только пользователь выполнит изменение размера.

Ответ 1

Заимствуйте некоторые идеи из решений concurrency для управления потоком событий, поступающих из браузера.

Например, когда вы впервые получаете событие изменения размера, установите флаг в true, указывающий, что пользователь в настоящее время изменяет размер. Установите тайм-аут, чтобы вызвать обработчик события фактического изменения размера через 1 секунду. Затем, когда этот флаг имеет значение true, игнорируйте событие изменения размера. Затем, в фактическом обработчике, как только все будет сделано и правильно, установите флаг обратно в значение false.

Таким образом вы обрабатываете только последнее событие один раз в секунду (или какой-то другой период времени в зависимости от ваших требований). Если пользователь останавливается в середине изменения размера, он будет обрабатываться. Если пользователь закончил, он обработает.

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

Ответ 2

Как насчет некоторого кода:

function resizeStuff() {
 //Time consuming resize stuff here
}
var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds
});

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

Ответ 3

Paul Irish имеет отличный отключенный плагин jQuery, который решает эту проблему.

Ответ 4

Если вы находитесь в библиотеках, вы должны отмечать underscore, подчеркивание уже обрабатывает ваши потребности и многие другие, которые вы, вероятно, будете иметь в своих проектах.

вот пример того, как работает деблок подчёркивания:

// declare Listener function
var debouncerListener = _.debounce( function(e) {

    // all the actions you need to happen when this event fires

}, 300 ); // the amount of milliseconds that you want to wait before this function is called again

то просто вызовите эту функцию debouncer при изменении размера окна

window.addEventListener("resize", debouncerListener, false);

проверить все доступные функции подчеркивания http://underscorejs.org/

Ответ 5

Как установить тайм-аут, когда пользователь приостанавливает изменение размера? Reset таймаут при изменении размера или запустить обработчик события изменения размера, если истечет время ожидания.

Ответ 6

Поскольку он построен в jQuery, не можете ли вы связать какое-то событие onComplete с расширением и передать функцию, которая должна выполняться при ее вызове?

Edit:

Когда пользователь начинает изменять размер окна, задайте интервал, который отслеживает размеры окна. Если размеры не изменились в течение заданного периода времени вашей спецификации, вы можете рассмотреть изменение размера окна "завершено". Ваша функция javascript выбора в этом случае будет setInterval(), которая принимает два аргумента - функцию для вызова каждого тика и продолжительность каждого тика в миллисекундах.

Что касается того, как писать это специально в рамках jquery, я не знаю достаточно о jquery, чтобы иметь возможность сказать вам это. Возможно, кто-то еще может помочь вам более конкретно, но в то же время вы можете рассмотреть возможность расширения расширения jquery, которое вы уже связали с событием onComplete, которое работает, как я только что описал.

Ответ 7

Я продлил несколько дней назад по умолчанию jQuery on -event-обработчик. Он присоединяет функцию обработчика событий для одного или нескольких событий к выбранным элементам, если событие не запускалось для заданного интервала. Это полезно, если вы хотите активировать обратный вызов только после задержки, например событие изменения размера или другое. https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

Используйте его, как и любой другой обработчик on или bind -event, за исключением того, что вы можете передать дополнительный параметр как последний:

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/