关于css:面试题

✨ 介绍防抖节流原理、区别以及利用，并用JavaScript进行实现

1. 防抖

• 原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则从新计时。

• 实用场景：

  • 按钮提交场景：避免屡次提交按钮，只执行最初提交的一次
  • 搜寻框联想场景：避免联想发送申请，只发送最初一次输出

// 简易版实现
function debounce(func, wait=1000) {
    let timeout;
    return function (args) {
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(this, args)
        }, wait);
    }
}

// 立刻执行版实现,有时心愿立即执行函数，而后等到进行触发 n 秒后，才能够从新触发执行。
function debounce(func, wait=5000, immediate=true) {
    let timeout;
    return function (args) {
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            const callNow = !timeout;
            timeout = setTimeout(function () {
                timeout = null;
            }, wait)
            if (callNow) func.apply(this, args)
        } else {
            timeout = setTimeout(function () {
                func.apply(this, args)
            }, wait);
        }
    }
}

/**
func函数可能会有返回值，所以须要返回函数后果，
然而当 immediate 为 false 的时候
因为应用了 setTimeout 
咱们将 func.apply(context, args) 的返回值赋给变量
最初再 return 的时候，值将会始终是 undefined
所以只在 immediate 为 true 的时候返回函数的执行后果
*/
function debounce(func, wait, immediate) {
    let timeout, result;
    return function (args) {
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            const callNow = !timeout;
            timeout = setTimeout(function () {
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(this, args)
        }
        else {
            timeout = setTimeout(function () {
                func.apply(this, args)
            }, wait);
        }
        return result;
    }
}

1. 节流

• 原理：规定在一个单位工夫内，只能触发一次函数。如果这个单位工夫内触发屡次函数，只有一次失效。

• 实用场景：

  • 拖拽场景：固定工夫内只执行一次，避免超高频次触发地位变动
  • 缩放场景：监控浏览器resize

/* 应用工夫戳实现
应用工夫戳，当触发事件的时候，咱们取出以后的工夫戳，
而后减去之前的工夫戳(最一开始值设为 0 )，
如果大于设置的工夫周期，就执行函数，
而后更新工夫戳为以后的工夫戳，如果小于，就不执行。
*/
function throttle(func, wait) {
  let previous = 0;
  return function (args) {
    let now = +new Date();
    if (now - previous > wait) {
      func.apply(this, args);
      previous = now;
    }
  }
}

/*应用定时器实现
当触发事件的时候，咱们设置一个定时器，
再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，
而后执行函数，清空定时器，这样就能够设置下个定时器。
*/
function throttle(func, wait) {
  let timeout;
  return function (args) {
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        func.apply(this, args)
      }, wait)
    }

  }
}

/** 防抖:
 * 利用场景：当用户进行了某个行为(例如点击)之后。
 不心愿每次行为都会触发办法，而是行为做出后,
 一段时间内没有再次反复行为，
 * 才给用户响应
 * 实现原理 : 每次触发事件时设置一个延时调用办法，
 并且勾销之前的延时调用办法。
 （每次触发事件时都勾销之前的延时调用办法）
 *  @params fun 传入的防抖函数(callback) delay 等待时间
 *  */
const debounce = (fun, delay = 500) => {
    let timer = null //设定一个定时器
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fun.apply(this, args)
        }, delay)
    }
}

/** 节流
 *  利用场景:用户进行高频事件触发(滚动)，
 但在限度在n秒内只会执行一次。
 *  实现原理: 每次触发工夫的时候，
 判断以后是否存在期待执行的延时函数
 * @params fun 传入的防抖函数(callback) delay 等待时间
 * */

const throttle = (fun, delay = 1000) => {
    let flag = true;
    return function (...args) {
        if (!flag) return;
        flag = false
        setTimeout(() => {
            fun.apply(this, args)
            flag = true
        }, delay)
    }
}

区别:节流不论事件触发多频繁保障在肯定工夫内肯定会执行一次函数。防抖是只在最初一次事件触发后才会执行一次函数