JS防抖节流篇----节流

Fx_cap

已于 2024-02-28 14:00:53 修改

阅读量342

点赞数

分类专栏： JS防抖节流篇文章标签： javascript 前端

于 2021-12-17 16:04:11 首次发布

本文链接：https://blog.csdn.net/m0_56274171/article/details/121998565

版权

JS防抖节流篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

节流:

频繁触发,但是触发时间内一段时间执行一次

常见应用场景:

resize scroll

//理解版
<body>
    <input type="text">
    <script>
        const ipt = document.querySelector('input')
        // 节流:一定时间内执行一次
        let timer = null
        ipt.oninput = (e) => {
            if (!timer) {
                timer=setTimeout(() => {
                    console.log(e.target.value);
                    timer = null
                }, 2000);
            }
        }
    </script>
</body>

// 时间戳,第一次触发立即执行
    function throttle(fn, interval) {
      let last = 0
      return function () {
        let now = Date.now()
        // now - last两次触发的时间间隔
        if (now - last >= interval) {
          last = now
          fn.apply(this, arguments);
        }
      }
    }
    function handle() {
      console.log(Math.random());
    }
    const throttleHandle = throttle(handle, 1000)
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()

// 定时器,第一次触发不会立即执行,但是最后一次会延迟
    function throttle(fn, interval) {
      let timer = null
      return function () {
        let context = this
        let agrs = arguments
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, agrs)
            timer = null
          }, interval)
        }
      }
    }
    function handle() {
      console.log(Math.random());
    }
    const throttleHandle = throttle(handle, 1000)
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()

// 定时器+时间戳,第一次触发不会立即执行,最后一次也不会延迟
    function throttle(fn, delay) {
      let timer = null
      let startTime = Date.now()
      return function () {
        let curTime = Date.now()
        //curTime - startTime本次执行和上次执行的时间差
        //delay - (curTime - startTime)是否到达设定时间
        let remainning = delay - (curTime - startTime)
        let context = this
        let args = arguments
        clearInterval(timer)
        if (remainning <= 0) {
          fn.apply(context, agrs)
          startTime = Date.now()
        } else {
          timer = setTimeout(fn, remainning)
        }
      }
    }
    function handle() {
      console.log(Math.random());
    }
    const throttleHandle = throttle(handle, 1000)
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()
    throttleHandle()

Fx_cap

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS防抖节流篇----节流

节流: 频繁触发,但是触发时间内一段时间执行一次常见应用场景: 输入框联想菜单//理解版<body> <input type="text"> <script> const ipt = document.querySelector('input') // 节流:一定时间内执行一次 let timer = null ipt.oninput = (...
复制链接

扫一扫

专栏目录