我的封装节流

2022/2/28 23:26:41

编程Tag： 封装节流 let function throttle flag oInput timerId

本文主要是介绍我的封装节流，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text" id="input_wrapper">
<script>
    let oInput = document.getElementById("input_wrapper");
    oInput.addEventListener("input", throttle(function (e) {
        console.log(e);
    }, 1000))

    function throttle(fn, delayTime) {
        let flag = true
        let timerId = null
        return function () {
            // 因为throttle一开始就执行了，那么就是返回了这个函数，而这个函数就要接收e，或者其他参数
            // 所以在这边接收是没毛病的，然后this，也就指向了元素（拿addEventListener来说）
            let args = arguments
            let event = this
            if (!flag) return;
            flag = false
            timerId && clearTimeout(timerId)
            timerId = setTimeout(() => {
                fn.apply(event, args)
                flag = true
            }, delayTime || 1000)
        }
    }
</script>
</body>
</html>

这篇关于我的封装节流的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

我的封装节流

相关编程文章