JavaScript高频面试点——节流

前言

` javascript中防抖和节流的面试题几乎会出现在每个面试者的题目中，该文章讲解本人在学习javascript中对节流问题的理解 。

节流的应用场景

1、DOM元素的拖拽功能实现
2、射击游戏
3、计算鼠标移动的距离
4、监听scroll滚动
…

节流的原理：

连续触发事件但是在n秒中只执行一次。

节流所实现的方式

1、时间戳思路
2、定时器思路

时间戳思路：

我们取出当前的时间戳 now

1、我们取出当前的时间戳 now；
2、然后减去之前执行时的时间戳(首次值为 0 ) startTime；
3、如果大now - startTime> time，证明时间区间维护结束，执行指定事件，更新startTime；

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

下面展示 核心代码。

const box = document.querySelector('.box')
    let i = 1

    function mouseMove() {
        box.innerHTML = ++i
        console.log(1235);
    }

    function throttle(fn, time) {
        let startTime = 0
        return function() {
            let now = Date.now()
            if (now - startTime > time) {
                fn()
                startTime = now
            }
        }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 3000))

当鼠标移入的时候，事件立刻执行，每过 3s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。