js实现防抖节流

最新推荐文章于 2024-09-25 17:34:00 发布

逾期不予

最新推荐文章于 2024-09-25 17:34:00 发布

阅读量154

点赞数

文章标签： js javascript html css

本文链接：https://blog.csdn.net/m0_49681744/article/details/108682081

版权

HTML样式

<body>
    <div>
        <input type="text">
        <ul></ul>
    </div>
</body>

CSS样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 50px auto;
            width: 500px;
        }

        input {
            width: 500px;
            height: 40px;
            outline: none;
            border: 2px solid skyblue;
            border-radius: 10px;
            padding-left: 20px;
            font-size: 25px;
        }

        ul {
            width: 520px;
            border: 2px solid skyblue;
            border-radius: 10px;
            font-size: 18px;
            display: none;
        }

        ul,
        li {
            list-style: none;
        }
    </style>

JS相关代码

<script>
 const oIpt = document.querySelector('input');
        const oUl = document.querySelector('ul');

        // 2, 给 input 标签,添加输入事件 input事件
        oIpt.addEventListener('input', () => {
            // 设定一个定时器,延迟触发执行
            setTimeout(() => {
                // 2-1, 获取时间戳
                const time = new Date();
                let t = parseInt(time.getTime() / 1000);

                // 2-2, 获取输入的数据
                let keyWord = oIpt.value;

                // 3, 执行 jsonp 跨域请求
                // 应该是 定义一个script,和src属性 
                // 使用节点操作,动态生成标签
                const s = document.createElement('script');

                // 给s标签定义src属性

                s.src =
                    `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7513,32606,1423,32327,31253,32673,32116,26350,22159&wd=${keyWord}&req=2&csor=1&cb=setSearch&_=${t}`;

                // 最终script标签要写入到 body 标签的最后
                const oBody = document.body;
                oBody.appendChild(s);

                // 删除 写入的 script 标签
                oBody.removeChild(s);

            }, 1500);
        })


        // 3, 失去焦点,让ul隐藏
        oIpt.addEventListener('change', () => {
            oUl.style.display = 'none';
        })


        // 定义一个函数,根据返回值结果,生成页面内容
        function setSearch(res) {
            if (res.g === undefined) {
                // 证明是没有搜索结果
                // 隐藏ul
                oUl.style.display = 'none';
            } else {
                console.log(res);
                // 有查询结果
                const arr = res.g;

                // 2, 根据arr中的对象的q属性, 生成li, 写入ul
                let str = '';

                arr.forEach(item => {
                    str += `<li>${item.q}</li>`;
                })

                // 将生成的li写入ul
                oUl.innerHTML = str;

                // 让ul显示
                oUl.style.display = 'block';
            }
        }
    </script>