前端防抖和节流

概述

防抖： 防止抖动，个人字面理解此处防的不是页面的抖动，而是用户手抖。为了防止用户快速且频繁的触发事件而导致多次执行事件函数，这样的场景有很多，比如监听滚动、鼠标移动事件onmousemove、频繁点击表单的提交按钮等等。
节流： 节约流量，为了节约流量，页面在一个时间周期内，只触发一次动作。所以节流的目的时稀释函数的执行频率。
防抖动和节流本质是不一样的。防抖动是多次触发但只会执行一次，节流是多次触发但周期内只会执行一次

防抖实现

html>

body>
    input type="button" id = "btn" value="提交" />
    ul id="result">/ul>
    script>

        var resultText = ""
        const print = (text) => {
            let item = document.createElement('li')
            item.innerText = text
            document.getElementById("result").appendChild(item)
        }服务器托管网
        // 创建debounce防抖函数
        const debounce = (func, wait) => {
            let timeout = null;
            // 此时func的this指向是window
            // 如果func内部想修改this指向当前函数的调用者，就必须存储this，之后借助apply修改func的this指向。
            // 因此借助闭包缓存调用者的this
            let context = null; 
            
            let args = null;
            // 通过定时器延迟执行事件函数
            let run = () => {
                timeout = setTimeout(() => {
                    // 通过 apply 修改func的this指向，并让func获取真正的事件函数（即防抖函数return出来的函数）的参数，之后执行func
                    func.apply(context, args);
                    timeout = null
                }, wait);
            }

            // 清除定时器
            let clean = () => {
                clearTimeout(timeout);
            }

            return function () {
                context = this; // 谁调用函数（这里的函数是防抖函数return出来的函数），this就指向谁。
              
                args = arguments; // arguments 是一个对应于传递给函数的参数的类数组对象，可以获取函数的参数（这里的函数是防抖函数return出来的函数）。
                console.log(args)
                if (timeout) {
                    print('重置定时器');
                    clean();
                    run();

                } else {
                    print('开启新的定时器');
                    run();
                }
            }
        }

        // 要执行的事件函数
        const handleSubmit = (e) => {
            print('提交表单', e);
        }

        const fn1 = debounce(handleSubmit, 1500)

        document.getElementById("btn").addEventListener("click", fn1)
  服务器托管网  /script>
/body>

/html>

节流实现

html>

body>
    input type="button" id="btn" value="提交" />
    ul id="result">/ul>
    script>

        var resultText = ""
        const print = (text) => {
            let item = document.createElement('li')
            item.innerText = text
            document.getElementById("result").appendChild(item)
        }
        const throttle = (func, wait) => {

            let timeout = null;

            return function () {
                let context = this;
                let args = arguments;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args);
                    }, wait)

                }
            }
        }

        // 要执行的事件函数
        const handleSubmit = (e) => {
            print('提交表单', e);
        }

        const fn1 = throttle(handleSubmit, 1500)

        document.getElementById("btn").addEventListener("click", fn1)
    /script>
/body>

/html>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: java后端操作树结构

一、树结构的三种组装方式(递归.双层for循环,map) （1）递归 普通递归方法 public Result getBmsMenuList(UserSessionVO userSessionInfo) { // 查询顶级节点菜单 List bmsMenuVO…