欢迎光临
我们一直在努力

JavaScript | 初次探索JavaScript节流

节流概念

JavaScript节流指的是什么?我们首先都知道,JavaScript中的DOM操作是非常耗费资源的,设想一个场景——创建一个input并通过addEventListener进行监听用户输入的内容。在这种情况下,用户每次进行输入都会导致执行一次代码(来获取用户输入),而实际上我们并不需要每次用户输入代码都进行操作,而是等用户输入完成后,如0.5秒后再进行获取用户输入。

我们可以通过setTimeout实现上面的操作,这个实现过程就叫做节流。

节流案例

下面是一个十分简单的节流案例,此案例的重点在于理解inputHandler()内的定时器与bool = true执行过程。事实上,由于定时器会“延后执行”,因此先执行的是bool = true语句。初次之外,要记得每次都清除定时器,防止其在堆内占用空间。

<body>
    <input type="text">
    <script>
        var input = document.querySelector("input");
        var bool = false;

        input.addEventListener(input,inputHandler);
        //首次执行设置定时器,然后bool变为true,此后用户输入将不会执行判断语句后代码
        //定时器内函数执行后,把bool恢复为true,此后用户输入可正常执行判断语句后代码
        function inputHandler(e){
            if(bool) return;
            var ids = setTimeout(function(){
                clearTimeout(ids);
                console.log(input.value);
                bool = false;
            },500);
            bool = true;
        }
    </script>
</body>
赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 初次探索JavaScript节流
分享到: 更多 (0)

评论 抢沙发

5 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏