JS函数防抖动

Ethan815 发布于2019-08-26 10:26 / 3251人阅读

摘要：解决方案采用的解决方案是直接使用防抖函数。详情可以参照中文文档理解防抖作用延迟执行，防止间隔时间内连续调用减少响应次数，优化性能。

前言

目前在做一个大型的前端后台管理系统，里面有大量的表单校验和输入框查询操作。如果每次用户输入的瞬间都去响应或者检测，其实是不太必要的，因为用户的输入一般具有连续性，所以可以在用户输入产生停顿的时候再去校验或者向服务器发送请求。

解决方案

采用的解决方案是直接使用 lodash 防抖函数 _.debouce。
详情可以参照： lodash 中文文档

理解防抖

作用：延迟执行，防止间隔时间内连续调用,减少响应次数，优化性能。
自实现代码：

  /**
   *
   * @param  {function}   func      回调函数
   * @param  {number}     wait      表示时间窗口的间隔
   * @param  {boolean}    immediate 是否立即执行 
   *                               
   * @return {function}             返回调用函数
   */
        var debounce = (func, wait = 100, immediate = false) => {
            let timer, ctx, args;

            // 延迟执行函数
            const later = () => setTimeout(() => {
                timer = null;
                if (!immediate) {
                    func.call(ctx, ...args);
                    ctx = args = null;
                }
            }, wait);

            return function() {
                if (!timer) {
                    timer = later();
                    if (immediate) {
                        func.call(this, ...arguments);
                    } else {
                        ctx = this;
                        args = arguments;
                    }
                } else {
                    clearTimeout(timer);
                    timer = later();
                }
            }
        }

如果是立即执行（immediate: true）

第一次调用，创建一个保护性质的 timer

立即执行传入的 func 并且将返回函数的执行上下文绑定到 func 中

如果达到 wait 时间执行定时器函数，timer 置为 null，等待一个新的调用过程

如果没有达到 wait 时间再次调用

此时 timer 仍然存在，于是会调用 clearTimeout 清除原有定时器，再创建一个新的 timer

达到了 wait 时间内无法连续调用的情况，这就是为什么说第一次调用创建的timer是一个保护性质的

如果延迟执行（immediate: false）

第一次调用，创建一个 timer

缓存执行上下文 this 和 arguments

由于 JS 中的异步机制，就算 wait 值为 0，timer 中的函数也会晚于上一步执行

如果达到 wait 事件执行定时器函数，拿到的是正确的 this 和 args，而非 undefined

执行完毕后清除当前缓存执行上下文和参数，等待一个新的调用过程

如果没有达到 wait 时间再次调用

此时 timer 仍然存在，于是会调用 clearTimeout 清除原有定时器，再创建一个新的 timer

达到了在 wait 时间内无法连续调用的结果

专线服务 idc机房托管防抖动 webrtc防抖动 webrtc防抖动策略 js里函数没有函数体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106168.html

关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

张红新 2019-08-22 16:45 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

lieeps 2019-08-29 15:12 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

shery 2019-08-02 10:18 评论0 收藏0
防抖动与节流

摘要：防抖动节流节流使得一定时间内只触发一次函数。它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。防抖动与节流针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。所以我们对于这种事件我们要进行防抖动或...

Yangyang 2019-08-21 17:41 评论0 收藏0
防抖动处理和节流小技巧

摘要：简单的防抖动处理，一秒内点击一次向服务器请求数据点击按钮向后台请求数据优化点另外一些防抖动的小技巧，请参考封装好的简单防抖动函数防抖动函数要执行的函数，间隔毫秒数调用现成的工具库防抖动节流 1. 简单的防抖动处理，一秒内点击一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...

lscho 2019-08-22 18:02 评论0 收藏0