javascript - 关于jQuery的执行-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 关于jQuery的执行

高洛峰 2017-04-11 12:51:56

[JavaScript讨论组]

429

第一种总是显得一卡一卡的, 第二个却没这问题. 求帮忙解释一下为什么?
现在是想把e.pageX - $('.mask').offset().left-50提出来做if判断,但是一这样就成了第一种的情况, 该怎么解决呢?

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(4)

怪我咯2017-04-11 12:53:56 4楼

先不讨论页面的处理逻辑，专注性能的问题进行分析。
因为第一种每次mousemove的时候，都要动态去查两次$('.mask')并且更新DOM的位置，又由于这个鼠标事件触发的频率是非常非常高的，导致JS性能下降。对比之下第二种他直接使用this，这个this直接就是DOM的引用了，不需要浪费资源去在文档里面查询，不会有太大的性能问题。

综合起来，优化的办法有两个方面：

一、提前获取DOM的引用，不用每次都去动态获取：

var mask = $('.mask');
...

二、限制一下事件处理的频率：

var canResponse = true;
$('.small').mousemove(function (e) {

    if (canResponse) { // 没被禁止，可继续进行处理
    
        // 这里是一些处理鼠标事件的操作...
        
        // 后置操作：限制事件处理的频率
        canResponse = false; // 禁止事件的处理
        setTimeout(function() {
            canResponse = true;
        }, 50); // 50毫秒后释放，可以执行鼠标事件的处理
    }
}

希望对你有帮助哦。

赞 +0

添加回复

ringa_lee2017-04-11 12:53:56 3楼

$('.mask').offset().left默认取得是第一个class=mask的元素的值。
$(this).offset().left取得的是你触发mousemove事件的元素

赞 +0

添加回复

黄舟2017-04-11 12:53:56 2楼

如果要在css里面做判断的话，为什么不用三元表达式呢？jquery的css属性是支持三元表达式的。

如果你做的是动画效果一卡一卡的，可以尝试使用animate方法做成缓动动画，用stop方法来进行限制。
既然用了jquery框架就多用一下jquery的方法少用原生，反正已经引入了，空间已经分配了却只用了一点，不是有点浪费了吗？

赞 +0

添加回复

怪我咯2017-04-11 12:53:56 1楼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="jquery-3.1.1.min.js"></script>
    <style>
        * {margin:0;padding:0;}
        .box {
            width:350px;
            height:177px;
            border: 1px solid #ccc;
            margin: 100px;
            position:relative;
        }
        .big {
            width: 450px;
            height: 350px;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            position:absolute;
            overflow:hidden;
            display: none;
        }

        .mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255,255,0,0.3);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {position: relative;}
        .small img {width: 100%; height: 100%;}
    </style>
</head>
<body>
    <p class="box">
        <p class="small">
            < img src="(0)-.jpg" alt="">
            <p class="mask"></p>
        </p>
        <p class="big">
            < img src="(0).jpg" alt="">
        </p>
    </p>
</body>
</html>

<script>

    // 第一种
    $(function () {
        $('.small').mousemove(function (e) {
            $('.mask').css({
                'display':'block',
                'left': e.pageX - $('.mask').offset().left-50,
                'top': e.pageY- $('.mask').offset().top-50
            });
        });
    });

    // 第二种
    // $(function () {
    //     $('.small').mousemove(function (e) {
    //         $('.mask').css({
    //             'display':'block',
    //             'left': e.pageX - $(this).offset().left-50,
    //             'top': e.pageY- $(this).offset().top-50
    //         });
    //     });
    // });
</script>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>