JavaScript Advanced Series Throttling [throttle] и Debounce [debounce]

JavaScript

1. Концепция

Эти две вещи появляются для оптимизации проекта, и официального определения нет, они появляются в основном для решения проблем низкой производительности и огромного потребления памяти, вызванных некоторыми событиями, которые выполняются непрерывно в течение короткого промежутка времени;
Такие события, как правило, похожи на прокрутку клавиш, движение мыши, изменение размера и т. д., которые запускаются непрерывно в течение короткого периода времени, что потребляет много производительности, особенно для некоторых операций, которые изменяют структуру DOM;

Дросселирование [throttle] очень похоже на [debounce], то есть сколько раз вышеупомянутые события запускаются в течение заданного времени от постоянного срабатывания до указанного времени;

дроссель [ дроссель ]

Распространенное объяснение дросселирования состоит в том, что когда мы выпускаем воду из крана, как только открывается кран, вода устремляется вниз Это прекрасная традиционная добродетель трудолюбия и бережливости Мы должны немного приоткрыть кран. по капле по капле через определенный интервал времени, это, ну это у нас понятие троттлинга;
С точки зрения функций, используйте метод setTimeout, заданный два раза, последнее время минус первое время, и когда время, которое мы даем, будет достигнуто, мы вызовем это событие один раз.Это слишком общее, чтобы сказать, что давайте посмотрим следующая функция, Здесь мы берем [scroll] в качестве примера;

/** 样式我就顺便写了 **/
<style>
    *{padding:0;margin:0;}
    .scroll-box{
        width : 100%;
        height : 500px;
        background:blue;
        overflow : auto;
    }    
    .scroll-item{
        height:1000px;
        width:100%;
    }
</style>

------------------------

/** 先给定DOM结构;**/
<div class="scroll-box">
    <div class="scroll-item"></div>
</div>

------------------------

/**主要看js,为了简单我用JQ去写了**/
<script>
    $(document).ready(function(){
        var scrollBox = $('.scroll-box');
        //调用throttle函数，传入相应的方法和规定的时间;
        var thro = throttle(throFun,300);
        //触发事件;
        scrollBox.on('scroll' , function(){
            //调用执行函数;
            thro();
        })

        // 封装函数;    
        function throttle(method,time){
            var timer = null;
            var startTime = new Date();
            return function(){
                var context = this;
                var endTime = new Date();
                var resTime = endTime - startTime;
                //判断大于等于我们给的时间采取执行函数;
                if(resTime >= time){
                    method.call(context);
                    //执行完函数之后重置初始时间，等于最后一次触发的时间
                    startTime = endTime;
                }
            }
        }
        function throFun(){
            console.log('success');
        }
    })
</script>

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

анти-тряска [устранение дребезга]

Прежде чем писать код, давайте сначала проясним понятие анти-тряски.Я не знаю, сделали ли вы что-то вроде плавающих рекламных окон с обеих сторон компьютера.Когда мы перетаскиваем полосу прокрутки, рекламные окна с обеих сторон будут тяните за полосу прокрутки, двигайтесь и продолжайте пытаться быть посередине, и тогда вы увидите эти два окна, трясущиеся и трясущиеся;

Обычно это называется джиттером, и что нам нужно сделать, так это предотвратить этот вид джиттера, который называется debounce [устранение дребезга];

Тогда идея защиты от дрожания здесь заключается в том, что после того, как мы закончим перетаскивание, позиции окна с обеих сторон будут пересчитаны, чтобы оно выглядело гладким и удобным для просмотра, а наиболее важное количество операций над структурой DOM будет значительно уменьшено. ;

Оптимизирована производительность страниц и уменьшено потребление памяти.В противном случае, если вы используете более старый браузер, такой как IE, он может просто подскочить для вас.

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

Посмотрите на код:

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
    var timer = null ;
    return function(){
        var context = this;
        //在函数执行的时候先清除timer定时器;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.call(context);
        },time);
    }
}

Идея состоит в том, чтобы очистить таймер перед выполнением функции.Если функция продолжает выполняться, метод в таймере будет постоянно очищаться, и функция будет выполняться только после того, как наша операция закончится;

На самом деле, есть много способов писать, но в основном это вопрос мышления: если вы будете много писать, вы будете знать это естественным образом;

использовать

  1. Когда мы выполняем клавиатуру, например проверку фонового запроса, мы можем использовать функцию защиты от сотрясения, в противном случае мы будем запрашивать один раз при каждом нажатии на клавиатуру, запрос слишком частый, поэтому, когда мы закончим нажимать на клавиатуру, мы будем запрашивать снова, запрос будет намного меньше, а производительность будет естественной Само собой разумеется;
  2. Когда размер окна изменения размера изменяется, мы можем использовать технологию защиты от сотрясений или дросселирование;
  3. Мы можем использовать либо защиту от сотрясений, либо регулирование для событий движения мыши mousemove;
  4. Событие, вызванное полосой прокрутки, может, конечно, использовать либо антивибрацию, либо дросселирование;
  5. События, которые происходят постоянно и часто, могут быть решены двумя способами для оптимизации производительности страницы;

Какой из них больше подходит для использования, зависит в основном от потребностей вашего бизнеса.Ну, это конец этой статьи.Спасибо за чтение;

Играть руками непросто, и подводить итоги непросто, укажите источник для перепечатки, спасибо;

Категории