js防抖和节流

学习资源推荐

js防抖和节流

    • 防抖
    • 节流

防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

  • 示例
    • 游戏玩家看到法师怒气值满可能疯狂点击,但技能触发有一个蓄力过程,频繁触发则重新蓄力
  • 思路:
    • 每次触发事件时都取消之前的延时调用方法
 preventShake = (fn) => {
            let timer = null; // 创建定时器id
            return () => {
                clearTimeout(timer); // input事件频繁触发,清除之前定时器 
                timer = setTimeout(() => { // 创建新定时器,保证限定时间间隔fn只执行一次
                    fn();
                }, 500);
            };
        }
        test = () => {
            console.log(' prevent shake success');
        }
        //创建数输入框
        document.querySelector('body').appendChild(document.createElement('input'))
        //事件绑定
        document.querySelector('input').oninput = preventShake(test)

带参数


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script>

        /**
         * @example 防抖函数
         */
        const preventShake = (fn, t = 1000) => {
            let timer = null; // 创建定时器id
            return (...args) => {
                clearTimeout(timer); // input事件频繁触发,清除之前定时器 
                timer = setTimeout(() => { // 创建新定时器,保证限定时间间隔fn只执行一次
                    fn(...args);
                }, t);
            };
        }
        const test = (a, b, c) => {
            console.log(' prevent shake success', a, b, c);
        }
        //创建数输入框
        document.querySelector('body').appendChild(document.createElement('input'))

        const preventShakeTest = preventShake(test, 3000)
        //事件绑定
        document.querySelector('input').oninput = () => {
            preventShakeTest(1, 2, 3)
        }

    script>
body>

html>

节流

高频事件触发,但在n秒内只会执行一次

  • 示例

    • 即便玩家疯狂点击,技能触发速度也不会变快
  • 思路:

    • 每次触发事件时都判断当前是否有等待执行的延时函数
    throttle = (fn) => {
            let lock = true; // 函数外设置状态锁,默认开启
            return () => {
                if (!lock) return; // 在函数开头判断标记是否为true,不为true则return,住址后续程序进行
                lock = false; // 改变状态锁
                setTimeout(() => {
                    fn()
                    // 函数执行完,回调中改变状态锁
                    lock = true;
                }, 1000);
            };
        }
        test = () => {
            console.log('throttle');
        }
        //创建数输入框
        document.querySelector('body').appendChild(document.createElement('input'))
        //事件绑定
        document.querySelector('input').oninput = throttle(test)

你可能感兴趣的:(js)