当前位置:编程学习 > > 正文

js防抖用法(JavaScript的防抖和节流案例)

时间:2021-10-23 10:52:12类别:编程学习

js防抖用法

JavaScript的防抖和节流案例

防抖:在一定的时间内只执行最后一次任务;

节流:一定的时间内只执行一次;

防抖
  • <button id="debounce">点我防抖!</button>
     
    $('#debounce').on('click', debounce());
     
    function debounce() {
        let timer;
        // 闭包
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                // 需要防抖的操作...
                console.log("防抖成功!");
            }, 500);
        }
    }
    
  • js防抖用法(JavaScript的防抖和节流案例)

    节流:
  • <button id="throttle">点我节流!</button>
     
    $('#throttle').on('click', throttle());
     
    function throttle(fn) {
        let flag = true;
        // 闭包
        return function () {
            if (!flag) {
                return;
            }
            flag = false;
            setTimeout(() => {
                console.log("节流成功!");
                flag = true;
            }, 1000);
        };
    }
    
  • js防抖用法(JavaScript的防抖和节流案例)

    到此这篇关于JavaScript的防抖和节流案例的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐