17-计时器方法

最新推荐文章于 2022-09-30 20:15:32 发布

L_yang\

最新推荐文章于 2022-09-30 20:15:32 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： javascript java 前端

本文链接：https://blog.csdn.net/qq_68478665/article/details/126364378

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

计时器方法 获取节点写在函数外面

setlnterval与clearlnterval
setTimeout与clearTimeout

setlnterval：每隔一定时间执行一次函数；

clearlnterval：停止setlnterval的计时

setTimeout：过一定时间后只执行一次

clearTimeout：停止setTimeout的计时

需要赋值给变量然后使用停止的方法

<!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>
    <h2>北京时间</h2>
    <h1>12:00:00</h1>
    <h2>秒表</h2>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
    <button class="stop">结束</button>
    <h1 class="time">10:9</h1>
    <script>
        let h1 = document.querySelector("h1") // 
    setInterval(()=>{
        let timeNow = new Date ();
        let h =timeNow.getHours();
        let m = timeNow.getMinutes();
        let s = timeNow.getSeconds();
        let time = `${h}:${m}:${s}`
        h1.innerHTML = time;
    },500)
    let start = document.querySelector(".start")
    let pause = document.querySelector(".pause")
    let stop = document.querySelector(".stop")
    let time = document.querySelector(".time")
    let timer = null // 设为空值
    let ms = 0;
    let seconds = 0;
    time.innerHTML = `${seconds}:${ms}`
    start.onclick = function(){
        clearInterval(timer)
        timer = setInterval(()=>{
            if(ms === 9){
                ++seconds;
                ms = 0;
            }
            ms ++;
            time.innerHTML = `${seconds}:${ms}`
        },100)
    }
    pause.onclick = function(){
        clearInterval(timer)
    }
    stop.onclick = function(){
        seconds = 0;
        ms = 0;
        time.innerHTML = `${seconds}:${ms}`
    }
    </script>
</body>
</html>

防抖与节流

解决性能问题，开发中常会遇到。

防抖：对于短时间内多次触发事件的情况，可以使用防抖停止事件持续触发

节流：防止短时间内多次触发事件的情况，但是间隔事件内，还是需要不断触发事件

window.onscroll事件滚轮

// 防抖
let timer = null;
    window.onscroll = function(){
        if(timer !==null){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            console.log("hello");
            timer = null;
        },500)
        }

// 节流
    let mark = true;
    window.onscroll = function(){
        if(mark){
            setTimeout(()=>{
                console.log("123123123123");
                mark = true;
            },500)
        }
        mark = false;
    }

返回顶部效果

window.onscroll事件：滚动条滚动事件

document.documentElement.scrollTop:页面滚动距离位置距离顶部距离

等于0时是原位置，大于0时代表了滚动

window.scrollTo（0，0）页面滚动条返回至顶部

分别代表X坐标横向滚动条 Y坐标竖向滚动条

        body{
            height: 2000px;
        }
        .to-top{
            position: fixed;
            bottom: 100px;
            right: 100px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>惊魂之武僧</h1>
    <button class="to-top">⬆</button>
   <script>
    let btn = document.querySelector(".to-top")
    document.querySelector("button").onclick = function(){
        window.scrollTo(0,0);
    }
    let timer = null;

     window.onscroll = function(){
        if(document.documentElement.scrollTop >0){
            btn.style.display = "inline-block"
        }else{
            btn.style.display = "none"
        }}

利用闭包来封装防抖

        body{
            height: 2000px;
        }
        .to-top{
            position: fixed;
            bottom: 100px;
            right: 100px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>惊魂之武僧</h1>
    <button class="to-top">⬆</button>
    <script>
        let btn = document.querySelector(".to-top");
        document.querySelector("button").onclick = ()=>{
            window.scrollTo(0,0)
        }
        function debounce(fn){
        let timer =null;
        function eventFUN(){
            if(timer !== null){
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                // 业务代码
                fn();
                timer=null;
            },500)}
        return  eventFUN
    };
        window.onscroll = debounce(()=>{
            console.log("次数+1");
            if(document.documentElement.scrollTop > 0){
                btn.style.display = "block"
            }else{
                btn.style.display = "none"
            };
        })

利用闭包来封装节流

        let btn = document.querySelector(".to-top");
        document.querySelector("button").onclick = ()=>{
            window.scrollTo(0,0)
        }
        function debounce(fn){
        let timer =null;
        function eventFUN(){
            if(timer !== null){
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                // 业务代码
                fn();
                timer=null;
            },500)}
        return  eventFUN
    };
    function throttle(fn){
        let max =true;
        return function(){
        if(max){
            setTimeout(()=>{
                fn();
                max = true;
            },2000)
        }else{
            max =false;
        }
        }
    }
        window.onscroll = throttle(()=>{
            console.log("次数+1");
            if(document.documentElement.scrollTop > 0){
                btn.style.display = "block"
            }else{
                btn.style.display = "none"
            };
        })