【1LineCode】一行代码节流防抖

最新推荐文章于 2021-04-04 16:24:08 发布

良纵

最新推荐文章于 2021-04-04 16:24:08 发布

阅读量3.1w

点赞数

分类专栏： 1LineCode

本文链接：https://blog.csdn.net/qq_33807889/article/details/114198556

版权

1LineCode 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

const debounce = (fn,timeout = 1000,_timer) => (...args)=>clearTimeout(_timer,(_timer = setTimeout(fn.bind(this,...args),timeout)))


const throttle = (fn,timeout = 1000,_flag=true) => (...args)=>_flag && setTimeout(()=>{ _flag = true; fn.apply(this,args)},timeout) && (_flag = false)

hhhhh，这样写还是太难看了，还是开美颜吧。

const debounce = (fn,timeout = 1000,_timer) => (...args)=>(
    clearTimeout(_timer,(_timer = setTimeout(fn.bind(this,...args),timeout)))
)

const throttle = (fn,timeout = 1000,_flag=true) => (...args)=>(
    _flag && setTimeout(()=>{
        _flag = true;
        fn.apply(this,args)},timeout
    ) && (_flag = false)
)

搞个html试试吧

<!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>
</head>
<body>
    <button id="dBtn">debounce</button>
    <button id="tBtn">throttle</button>
    <script>
        const debounce = (fn,timeout = 1000,_timer) => (...args)=>(
            clearTimeout(_timer,(_timer = setTimeout(fn.bind(this,...args),timeout)))
        )

        const throttle = (fn,timeout = 1000,_flag=true) => (...args)=>(
            _flag && setTimeout(()=>{
                _flag = true;
                fn.apply(this,args)},timeout
            ) && (_flag = false)
        )

        window.onload = () => {
            const now = Date.now();

            const dBtn = document.getElementById('dBtn');
            const tBtn = document.getElementById('tBtn');

            const handleClick = name => console.log(`${name}:${Date.now() - now}`)

            dBtn.addEventListener('click',debounce(handleClick).bind(this,'debounce'))
            tBtn.addEventListener('click',throttle(handleClick).bind(this,'throttle'))
        }
    </script>
</body>
</html>

良纵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【1LineCode】一行代码节流防抖

const debounce = (fn,timeout = 1000,_timer) => (...args)=>clearTimeout(_timer(_timer = setTimeout(fn.bind(this,...args),timeout)))const throttle = (fn,timeout = 1000,_flag=true) => (...args)=>_flag &&setTimeout(()=>{_flag = true;.
复制链接

扫一扫