JavaScript 面试题（二十四）函数节流和事件防抖？

最新推荐文章于 2024-07-12 09:36:48 发布

混搭数理化

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量104

点赞数

分类专栏： JavaScript 面试题文章标签： javascript

本文链接：https://blog.csdn.net/qq_42684926/article/details/119967419

版权

JavaScript 面试题专栏收录该内容

26 篇文章 5 订阅

订阅专栏

函数节流：
函数调用不要太频繁。如每隔多少毫秒调用一次。

使用场景：
页面滚动时，会一直触发 scroll 事件，为了函数节流，只要页面一滚动，就启动一个定时器，在无数次滚动中，如果定时器没有停，则不调用函数。如果定时器停了，则在指定毫秒数之后调用一次函数，然后重新启动一个定时器。

<script>
    let i = 0;
    let timer = null;
    window.onscroll = function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            console.log(i++);
            timer = null
        }, 2000)
    }
</script>

事件防抖：
有一些事件触发比较频繁，比如键盘事件onkeydown、onkeyup、onkeypress，比如表单事件oninput。当触发一次，就发一次请求时，会有无数次抖动。事件防抖就是让频繁触发的事件只有一部分事件生效，如仅在用户短暂停止时才调用函数。

使用场景：
使用搜索框时，用户每输入一个字母就会发一次请求。根据用户输入习惯，我们希望用户在输完一个汉字或有短暂停留时再发送请求。此时这可以定义一个定时器，在指定毫秒数之后发送请求。每次触发输入事件时，先将上一次定时器清除，比较两次输入动作的时间，如果超过指定事件，则执行上一次输入事件，发送请求。

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
    <input type="text" id="querystr">
    <input type="submit" value="百度一下">
    <ul id="search-list"></ul>
</body>
<script>
    let myTimer = null;
    let queryDtr = document.getElementById('querystr');
    let searchList = document.getElementById('search-list')

    queryDtr.oninput = function () {
        if (myTimer) {
            //在每次输入时，先清除上一次的定时器，清除了定时器后，就不会发送请求了。
            window.clearTimeout(myTimer);
        }

        // 本次输入和上次输入之间的时间间隔大于100ms时，上次输入的内容就会发送请求。
        myTimer = setTimeout(() => {
            let scriptDom = document.createElement("script");
            scriptDom.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1438_24869_21080_18560_17001_25177_22160&req=2&bs=1%2B&pbs=1%2B&csor=2&pwd=1%3D&cb=f&_=1511334117083';
            document.body.appendChild(scriptDom);
            scriptDom.remove();
        }, 100);
    }

    function f(data) {
        console.log(data);
        let htmlStr = "";
        data.s.forEach((item) => {
            htmlStr += `<li>${item}</li>`;
        });
        searchList.innerHTML = htmlStr;
    }
</script>

</html>

混搭数理化

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 面试题（二十四）函数节流和事件防抖？

函数节流：函数调用不要太频繁。如每隔多少毫秒调用一次。使用场景：页面滚动时，会一直触发 scroll 事件，为了函数节流，只要页面一滚动，就启动一个定时器，在无数次滚动中，如果定时器没有停，则不调用函数。如果定时器停了，则在指定毫秒数之后调用一次函数，然后重新启动一个定时器。<script> let i = 0; let timer = null; window.onscroll = function () { if (timer) {
复制链接

扫一扫