javascript的函数的防抖和节流

最新推荐文章于 2024-04-03 13:08:44 发布

努力的小刘

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量127

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/asedasdad/article/details/110368231

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="input" />
</body>
<script>

  //防抖：刚开始也是输入后等一定时间后触发
  // function debounce(fn, delay) {
  //   let timer = null;
  //   return (args) => {   //形成闭包这样可以放置执行完毕后，变量回收
  //     if (timer) {
  //       clearTimeout(timer)
  //     }
  //     timer = setTimeout(() => {
  //       fn(args);
  //     }, delay);
  //   }
  // }
  //第一次立即触发
  // function debounce(fn, delay, immediate) {
  //   let timer = null;
  //   return (args) => {   //形成闭包这样可以放置执行完毕后，变量回收
  //     if (timer) {
  //       clearTimeout(timer)
  //     }
  //     if (immediate) {
  //       immediate = false;
  //       fn(args);
  //     }
  //     timer = setTimeout(() => {
  //       immediate = true;
  //       fn(args);
  //     }, delay);
  //   }
  // }
  //节流：连续触发函数时，在规定单位时间内只会触发一次。
  function throttle(fn, delay) {
    let timer;    // 定时器
    return function (args) {
      // 如果timer存在，说明函数还未该执行 也就是距离上次函数执行未间隔指定的时间
      if (timer) return;
      // 如果函数执行之后还有函数还在触发，再延迟执行。
      timer = setTimeout((...args) => {
        // 当函数执行时，让timer为null。
        timer = null;
        fn(args);
      }, delay);
    }
  }
  let handler = debounce(handleSendPhone, 500, true);
  let ipt = document.getElementById('input');
  ipt.addEventListener('input', function () {
    let val = this.value;
    handler(val)
  });
  function handleSendPhone(val) {
    console.log(val)
  }




</script>

</html>

努力的小刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的函数的防抖和节流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="te.
复制链接

扫一扫