Как написать функции защиты от тряски и дросселирования?

внешний интерфейс JavaScript

Обычно в нашей разработке мы часто используем события resize и movemove. Эти события часто запускают программы привязки событий за короткий промежуток времени. Мы знаем, что частые манипуляции с DOM приведут к большому потреблению производительности, а страница будет способствовать перекомпоновке и перерисовке. . Иногда страница зависает, и может произойти сбой прямо под браузером IE. Здесь вступает в действие функция дроссельной заслонки.

Что такое анти-шейк?

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

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

／**
*  @  { Function} callBack    回调程序    
*  @  { Number } delay  延时时间
*  return  { Function }
*／
function debounce(callBack,delay=200){
    var timer=null;
    return function(){
        var context=this;
        clearTimeout(timer);
        timer=setTimeout(()=>{
            callBack.apply(context,arguments)
        },delay)
    }
}

//调用
window.onresize=debounce(myFunc,300)

что дросселирует

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

／**
*  @  { Function} callBack 回调程序    
*  @  { Number } delay  延时时间
*  @  { Number }  intervalTime  间隔时间
*  return  { Function }
*／
function thorttleFn(callBack,delay,intervalTime){
    var timer=null;  // 定时器变量
    var time=0;  // 时间变量
    return function(){
        var context=this;
        var curTime=new Date();  // 当前执行的时间
        clearTimeout(timer);  //  清除上次的定时器
        
        if(!time){
            time=curTime;
        }
        // 当前执行时间距离上次执行的时间是否大于等于间隔时间
        if(curTime - time >= intervalTime){
            time=curTime;
            callBack.apply(context,arguments)
        }else{
            timer=setTimeout(()=>{
                callBack.apply(context,arguments)
            },delay)
        }
    }
}

//调用
window.onresize=thorttleFn(myFunc,50,300)
Категории