节流与防抖

节流与防抖

节流和防抖,都是优化高频率执行操作的有效手段。

防抖函数 debounce

功能:连续的事件,只在最后一次触发时执行操作
应用场景:最常见的就是输入框验证,如:用户注册时候的手机号码验证或邮箱验证。只有等用户输入完毕后,才检查格式是否正确;搜索框sug请求

防抖函数的实现

function debounce (fn, wait) {
    let timer = null;
    return function() {
        let args = arguments;
        let context = this;
        timer && clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
            clearTimeout(timer);
            timer = null;
        }, wait);
    }
}
// 较为全面的debounce
function debounce (func, wait, immediate) {
  let timeout = void 0;
  return function () {
    let context = this,
        args = arguments;
    let later = function later() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args);
    }
  };
}

节流函数 throttle

功能:限制一个行为在一定时间内只能执行一次。
应用场景:多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。

节流函数的实现

// 时间戳版
function throttle (fn, wait) {
    let previous = 0; // 上一次时间戳
    return function () {
        let context = this;
        let now = +new Date();
        if (now - previous > wait) { // 第一次会触发,最后一次如果间隔时间小于wait时则会被忽略
            fn.apply(context, arguments);
            previous = now
        }
    }
}
// setTimeout 版
function throttle (fn, wait) {
    let timer = null;
    return function() {
        if (timer) { // 最后一次如果间隔时间小于wait时则会被忽略
            return;
        }
        let context = this;
        let args = arguments;
        timer = setTimeout(function () {
            fn.apply(context, args);
            clearTimeout(timer);
            timer = null;
        }, wait);
    }
}
// 较为完整版
function throttle (func, wait, options) {
  let timeout = void 0,
      context = void 0,
      args = void 0,
      result = void 0;
  let previous = 0;
  if (!options) options = {};

  let later = function later() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };

  let throttled = function throttled() {
    let now = Date.now();
    if (!previous && options.leading === false) previous = now;
    let remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };

  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = context = args = null;
  };

  return throttled;
}

原文地址:https://www.cnblogs.com/fanlinqiang/p/11811067.html

时间: 2024-10-20 16:01:57

节流与防抖的相关文章

节流和防抖的实现

1 防抖 + 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件 + 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时 + 场景:keydown事件上验证用户名,输入法的联想 + 实现: function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout

js函数的节流和防抖

js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面 卡顿. 举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件 回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作.这些事可以利用 函数的防抖来实现

节流和防抖 区别和实现

节流 实现: /** * 函数节流:开始会执行一次,持续触发事件的话,每隔wait时间执行一次: * 应用场景mousemove, scroll等会连续执行的事件,比较适合应用于动画相关的场景. * @param fn 需要节流的函数 * @param wait 间隔时间 */ export function throttle(fn, wait = 1000) { let lastTime = 0; //上次执行的时间 return function (...args) { let now =

js函数节流和防抖

// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); }; // 函数防抖 var

节流函数&amp;防抖函数 柯里化函数

/* onscroll onresize input ..... 节流函数 让高频率事件进行减少触发变成低频率事件 var bStop = true; window.onscroll = function() { if(!bStop){ return; } bStop = false; setTimeout(()=>{ var t = document.documentElement.scrollTop || document.body.scrollTop; console.log(t); bS

节流和防抖

let last = 0, timer = null; // 把上次触发事件和定时器存在全局 /** * 防抖 * @param fn * @param delay * @returns {Function} */debounce=(fn, delay)=>{ // let timer = null; // 将debounce处理结果当作函数返回 return function () { // 保留调用时的this上下文 let context = this // 保留调用时传入的参数 let

节流和防抖函数

/** * 节流函数 * @param {Funtion} method 回调函数 * @param {Object} context 上下文地址 * @param {number} delay 延迟时间ms */ function throttle(method, context, delay) { delay = delay || 500; var currentDate = new Date(); method.startTime = method.startTime || 0; if (

js的节流和防抖

1,节流 节流就是对连续的函数触发,在设定的间隔时间段内,只让其执行一次. 先来看看js高级程序设计3里面节流的代码 function throttle (method, context, wait) { clearTimeout(method.tId) method.tId = setTimeout(function () { method.call(context) }, wait) } 当函数连续执行的时候,如果之前的定时器还没执行,就把它清除了,再从新设置一个新的定时器. 我们可以对这个

函数节流和防抖

函数的高阶使用2 我们来看一个分析: 如果要实现一个拖拽功能,需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置dom的位置来进行样式改变.如果不加以控制,每移动一定像素而触发的回调数量非常惊人,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览器可能就会直接假死. 在某些情况下会引发函数被非常频繁地调用,而造成大的性能问题.解决性能问题的处理办法就是函数节流和函数防抖. 函数防抖 是函数在特定的时间内不被再调用后执行. 也就是让某个函数在上一次执行后