关于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)
    }
}

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