JS节流与防抖

节流

节流，走字面上理解就是节约流量。比作水就话就是让水流的少一点，节约一点。对应到JS当中，就是在scroll事件和mousemove事件的时候，浏览器会很频繁的被触发，会导致对应的事件也会被很频繁的触发，这样就会使得浏览器资源消耗很大，此时就需要节流。

前面说过了，节流只是把水关小一点，同样，我们在JS中的节流就是让事件触发的不那么频繁。

        function throttle(func, ms = 1000) {

          let canRun = true

          return function (...args) {

            if (!canRun) return //如果是false 就终止

            canRun = false

            setTimeout(() => {

              func.apply(this, args) //将this指向指向为事件触发时的this

              canRun = true

            }, ms)

          }

        }

        // 测试

        const task = () => { console.log('run task') }

        const throttleTask = throttle(task, 1000)

        window.addEventListener('mousemove', throttleTask)

去抖

去抖，用淘宝页面举例子，当我们在搜索输入词汇时，他会根据词汇自动的去获取后台与之相关联的数据。但是如果在我们没输入一个字符时都去响应，这也响应的泰国频繁且响应的数据都是无效的。那么我们就需要用到去抖，即在判断用户是否还要输入，如果不输入了再去发起请求。

function debounce(func, ms = 1000) {

          let timer;

          return function (...args) {

            if (timer) {

              clearTimeout(timer)

            }

            // console.log(timer)

            timer = setTimeout(() => {

              func.apply(this, args) //将this绑定为执行环境的this

            }, ms)

          }

        }

        // 测试

        const task = () => { console.log('run task') }

        const debounceTask = debounce(task, 1000)

        window.addEventListener('mousemove', debounceTask)

节流与防抖的区别就是，节流是多少秒执行一次，而防抖是只会执行一次。