节流、防抖以及这段时间来的感受

func.call(thisArg, arg1, arg2, ...)

function greet(intro, time) {
  return `${intro}--${this.name},${this.age}--${time}`
}

const person = {
  name: 'Tim',
  age: 20,
}

console.log(greet.call(person, '你好', '2024')) // 你好--Tim,20--2024

func.apply(thisArg, [argsArray])

function greet(intro, time) {
  return `${intro}--${this.name},${this.age}--${time}`
}

const person = {
  name: 'Tim',
  age: 20,
}

console.log(greet.apply(person, ['你好', '2024'])) // 你好--Tim,20--2024

function add(a, b) {
  return a + b
}
const numbers = [2, 3]
console.log(add.apply(null, numbers)) // 输出: 5

const boundFunc = func.bind(thisArg, arg1, arg2, ...)

function greet(intro, time) {
  return `${intro}--${this.name},${this.age}--${time}`
}

const person = {
  name: 'Tim',
  age: 20,
}
const bindFun = greet.bind(person, '你好啊🤔')
console.log(bindFun('2024~~')) // 你好啊🤔--Tim,20--2024~~

Function.prototype.myCall = function (context) {
  // 检查调用者是否是函数
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }

  // 如果没有提供 context，默认使用全局对象（浏览器中是window，这里是非严格模式，严格模式是undefined）
  context = context || windows

  // 将当前函数（即this）作为 context 对象的一个属性fn，这样，我们就可以通过 context.fn 调用这个函数，并确保 this 指向 context 对象
  context.fn = this

  // 获取传递的参数
  // arguments 是一个类数组对象，包含传递给 myCall 的所有参数。使用扩展运算符 ... 将其转换为真正的数组，并使用 slice(1) 方法去掉第一个参数（即 context），获取剩余的参数。
  const args = [...args].slice(1)

  // 调用函数，并传递参数
  const result = context.fn(...args)

  // 删除临时添加的属性
  delete context.fn

  // 返回函数调用的结果
  return result
}

// function 需要被节流的目标函数
// delay 约定的时间，以毫秒为单位。在这个时间间隔内，目标函数最多只能执行一次
function throttle(func, delay) {
  // 记录上一次目标函数被调用的时间戳，初始值为0。
  let lastCall = 0

  // 返回一个新的匿名函数，这个函数包裹了目标函数 func 并添加了节流逻辑。
  // ...args：使用 ES6 的扩展运算符（spread operator）来获取传给这个匿名函数的参数，并将这些参数传递给 func。
  return function (...args) {
    // 获取当前时间
    const now = new Date().getTime()

    // 检查时间间隔，如果当前时间减去上次触发时间小于约定的时间段，直接返回；也就是说，用户在这个时间段内触发了多次
    // 但是由于还在这个时间段内，所以我们只执行一次
    if (now - lastCall < delay) {
      return
    }

    lastCall = now

    // 将参数传递给目标函数，并调用它
    return func(...args)
  }
}

function onResize() {
  console.log('Window resized', new Date().getTime())
}
function throttle(func, delay) {
  let lastCall = 0
  return function () {
    const now = new Date().getTime()
    if (now - lastCall < delay) {
      return
    }
    lastCall = now
    return func()
  }
}

const throttledResize = throttle(onResize, 200)

window.addEventListener('resize', throttledResize)

function throttle(func, delay) {
  let lastCall = 0
  return function (...args) {
    const now = new Date().getTime()
    if (now - lastCall < delay) {
      return
    }
    lastCall = now
    return func.apply(this, args)
  }
}

function debounce(func, wait) {
  let timeout
  return function (...args) {
    clearTimeout(timeout)

    // 设置一个新的计时器，在延迟时间 wait 之后调用目标函数 func。
    // 使用箭头函数（=>）确保 this 的值在回调中与外层函数一致。
    // func.apply(this, args)：使用 apply 方法调用目标函数 func，并确保 this 上下文和参数 args 被正确传递。
    timeout = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

function onInput() {
  console.log('Input event', new Date().toISOString())
}

const debouncedInput = debounce(onInput, 300)

const inputElement = document.querySelector('input')
inputElement.addEventListener('input', debouncedInput)