js防抖和节流

辰漪
2022-05-26 / 0 评论 / 13 阅读 / 正在检测是否收录...

防抖和节流

防抖:在给定时间内没有再次触发,该函数才会执行。
节流:先执行一次,在给定时间内该函数不会被再次触发。

js两种定时器

setTimeOut:该定时器n秒后执行一次函数,只会执行一次。
setInterVal:该定时器n秒执行一次函数,循环多次执行。

call、apply、bind

共同点: call、apply、bind都可以改变this的指向,第一个参数都是this的指向。
异同点:

  • call 第二个参数及其以后的参数都是想要传递的参数,他传递的是一个参数列表 例如:fn.call(this, 1,2,3),函数会立即执行。
  • apply 第二个参数传递的是一个参数数组 例如:fn.apply(this, [1,2,3]),函数立即执行。
  • bind 第二个参数及其以后的参数都是想要传递的参数,他传递的是一个参数列表 例如:fn.bind(this, 1,2,3), 会返回一个函数,需要接收并且手动调用。

防抖函数和节流函数

// 防抖函数
function debounce(fn, wait) {
  let timer = null
  // console.log(this, '1'); // this => window
  return function () {
    const e = arguments[0] // arguments[0] => input事件对象
    // console.log(this, '2'); // this => input
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      fn.call(this, e) // 调用fn 并传递input事件对象e
    }, wait);
  }
}
// 节流函数 
function throttle (fn, wait) {
  let flag = false // 用来判断时间是否超过wait
  let timer = null
  return function () {
    const e = arguments[0]
    if (flag) return 
    fn.call(this, e) // 先执行一次
    flag = true
    timer = setTimeout(() => { // 时间过啦 flag 改为false 此时函数再触发就会执行
      flag = false
    }, wait);
  }
}

小案例测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js防抖和节流</title>
</head>
<body>
  <input type="text" id="inp1">
  <input type="text" id="inp2">

  <script>
    const $ = function (selector) {
      return document.querySelector(selector)
    }
    // 测试防抖-给定时间里内没有再次触发才会执行
    $('#inp1').addEventListener('input', debounce(function (e) {
      console.log(this, '3'); // this => input
      console.log(e, '事件对象');
      console.log(e.target.value)
    }, 1000))
    // 测试节流-先执行一次 再次执行需要等到时间超过给定时间才会执行 
    $('#inp2').addEventListener('input', throttle(function (e) {
      console.log(this, '3'); // this => input
      console.log(e, '事件对象');
      console.log(e.target.value)
    }, 1000))
  </script>
</body>
</html>
0
选择打赏方式:
微信

评论 (0)

取消