防抖和节流代码

最新推荐文章于 2024-02-23 17:44:11 发布

wh_200

最新推荐文章于 2024-02-23 17:44:11 发布

阅读量95

点赞数

文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/wh_200/article/details/120639870

版权

<!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>
<script src="../js/jquery.js"></script>
<body>
  <input type="text">
</body>

</html>
<script>
//   https://www.jianshu.com/p/c8b86b09daf0 参考文档

// 函数的防抖
// let time = null; // 定义一个定时器存放的变量
// $('input').on('input',function(){
//    if(time){ // 如果定时器存在，就清除定时器
//      clearTimeout(time);
//    }
//    console.log($(this).val());
//    time = setTimeout(() =>{ // 重新开启一个定时器
//       fn($(this).val())
//     // console.log($(this).val());
//     },1000)
//     // console.log($(this).val());
// })

// function fn (val){
//   console.log(`我是发送请求的，请求的值为${val}`);
// }





// 函数节流
// let time = null; // 定义一个定时器的存放的变量
// $('input').on('input',function(){
//     console.log($(this).val());
//     if (time){ // 如果定时器存在，就不需要开启，直到上一个执行完成在开启
//         return;
//     }
//     time = setTimeout(()=>{
//       fn($(this).val())
//       time = null
//     },1000)
// })

$('input').on('input',throttle(fn,2000,2))
function fn () {
    // console.log('dedede');
    console.log($(this).val());
}

    // let dom = document.querySelector('input');
    // dom.oninput = debounce(fn,1000,false);
     
    // function fn (){
    //     console.log(this.value);
    // }
    /**
     * @desc 函数节流
     * @param func 函数
     * @param wait 延迟执行毫秒数
     * @param type 1 表时间戳版，2 表定时器版
     */
    function throttle(func, wait, type) {
        let previous = 0,timeout;
        // 因为let有块级作用域
        // if (type === 1) {
        //     let previous = 0;
        // } else if (type === 2) {
        //     let timeout;
        // }
        return function () {
            let context = this;
            let args = arguments;
            if (type === 1) {
                let now = Date.now();
                if (now - previous > wait) {
                    func.apply(context, args);
                    previous = now;
                }
            } else if (type === 2) {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }
            }
        }
    }
    // 防抖
    /**
     * @desc 函数防抖
     * @param func 函数
     * @param wait 延迟执行毫秒数
     * @param immediate true 表立即执行，false 表非立即执行
     */
    function debounce(func, wait, immediate) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            if (immediate) {
                var callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)
                if (callNow) func.apply(context, args)
            } else {
                timeout = setTimeout(function () {
                    func.apply(context, args)
                }, wait);
            }
        }
    }



</script>

wh_200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流代码

<!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>D.
复制链接

扫一扫