前端面试题

ggyyjavascript

已于 2022-11-28 18:37:49 修改

阅读量236

点赞数

分类专栏： js vue css 文章标签： javascript html5 css3 html webpack

于 2022-07-14 10:59:04 首次发布

本文链接：https://blog.csdn.net/guoshujie1/article/details/125780008

版权

js 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

17 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

面试笔记
防抖/节流封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            border-bottom: 1px dashed;
        }
    </style>
</head>
<body>
    <h2>防抖</h2>
    <div class="text">0</div>
    <button>请求参数</button>
    <h2>节流</h2>
    <div class="inputText"></div>
    <input type="text">
    <script>
        function $ (params) {
            return document.querySelector(params)
        }
        let text = $('.text')
        function textFn () {
            let num = parseInt(text.innerText)
            text.innerText = num + 1
        }
        $('button').onclick = shakeFn(textFn, 2000)

        let inputText = $('.inputText')
        let input = $('input')

        let fn2 = throttleFn(innerTextFn, 2000)
        input.oninput = fn2
        function innerTextFn () {
            console.log(this);
            inputText.innerText = input.value
        }
        // 防抖
        function shakeFn (fn, t) {
            let time = null
            return function () {
                clearTimeout(time)
                time = setTimeout(function(){
                    fn()
                    time = null
                }, t)
            }
        }
        // 节流
        function throttleFn (fn, t) {
            let startTime = Date.now()
            let setTime = null
            return function () {
                let currentTime = Date.now()
                let lastTime = t-(currentTime-startTime)
                clearTimeout(setTime)
                if (lastTime <= 0) {
                    fn.apply(this, arguments)
                    startTime = Date.now()
                } else {
                    setTime = setTimeout(fn(), lastTime)
                }
            }
        }
    </script>
</body>
</html>