tx6-屏幕缩放事件-闭包版函数节流

最新推荐文章于 2024-07-14 11:54:09 发布

原创最新推荐文章于 2024-07-14 11:54:09 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的窗口调整大小事件处理方法，通过节流(throttle)技术来限制事件处理函数的调用频率，避免因频繁触发导致的性能问题。此方法能够有效提高用户体验，并确保页面在不同分辨率下正确显示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="demo"></div>
</body>
</html>
<script>
    var num =0;
    var demo = document.getElementById("demo");
//    window.onresize  = function () {
//        num++;
//        demo.innerHTML = window.innerWidth || document.documentElement.clientWidth; //ie8拖动一次变化两次
//        console.log(num);
//    }
    window.onresize = throttle(function(){
        demo.innerHTML = window.innerWidth || document.documentElement.clientWidth;
        num++;
        console.log(num);
    },300);
    function throttle(fn,delay){
        var timer = null;
        return function () {
            clearTimeout(timer);
            timer= setTimeout(fn,delay);
        }
    }
</script>