是JavaScript(jQuery）和一个处理程序，每次从内存运行或读取

Is JavaScript (jQuery) and a handler run from memory or read every time?

本文关键字：内存 运行 读取 处理 jQuery JavaScript 一个 程序      更新时间：2024-02-19

我的问题分为两部分。一个整体问题和一个与之相关的明确代码问题。

一般问题：
Javascript是在加载时读取到内存中，并通过这个"安装"，还是每次我做某事时都读取它？处理程序是如何安装的？一旦我在一个元素上.click()，那么内存中的处理程序，包括它里面的函数吗？我曾经遇到过.mouseleave()的问题，每次我离开元素时，功能都会重新安装，而且绝对是一片混乱。。。那么这是如何与.click()一起工作的呢？这个函数是每次都重新读取还是一直保存在内存中？.mouseleave()的解决方案是：在这里。

具体问题：我刚刚发现，我在这里使用的.click()函数在第一次单击时运行一次，在第二次单击时执行两次，等等？你可以看到它，当你打开链接，打开控制台并点击一个图像。单击它再次关闭它，然后单击任意（！！）图像，它将按说明加载。奇怪吧？此外，它还将console中.data("installed")的布尔值记录为true，尽管切换为true只是在代码的后面？希望你能帮助我。

jQuery代码：

$('.pfiles').data("installed", false);
if (!$('.pfiles').data("installed")) {
    $('.pfiles img').click(function() {
        var scroll = $('body').scrollTop(),
            imgThis = $(this).attr('src'),
            txtThis = $(this).attr('src').split('/')[2].split('.')[0] + ".txt",
            $this = $(this),
            bigImgH = $(this).height(),
            bigImgW = $(this).width();
        $('.progress').show();
        console.log($('.pfiles').data("installed"));
        $('.pfiles').fadeOut(200, function() {
            $('.big').fadeIn(400);
            $('.frame').height($('.big').height());
        });
        $.ajax({
            type: 'GET',
            url: imgThis,
            dataType: 'HTML',
            success: function(data) {
                $('.big').empty().append("<img src='" + imgThis + "'/>");
                if (bigImgW / bigImgH <= 1.3529411176) {
                    $('.big img').css({'height': '100%'});
                } else {
                    $('.big img').css('width', '100%');
                }
                $('body').scrollTop(0);
                $('.big img').click(function(){
                    $('.big').fadeOut(400, function() {
                        $('.pfiles').fadeIn(400);
                        $('body').scrollTop(scroll);
                        $('.big').empty();
                        $('.frame').height($('.incontent').height());
                    }); 
                });
                // progress();
            }
        });
    });
    $('.pfiles').data("installed", true);
}

"HTML"代码

<?php
//Profile catch
$path = 'img/profile';
$profiles = scandir($path);
natsort($profiles);
$profiles = array_reverse($profiles);
$profiles = array_diff($profiles, array('.', '..', '.DS_Store', 'txt'));
?>
<div class="incontent" style="background:white">
<div class="progress">
    <div class="bardiv">
        <div class="bar"></div>
        <p class="bartext text"></p>
    </div>
</div>
<div class="big"></div>
<div class="pfiles">
    <?php
        foreach ($profiles as $pfiles) {
            echo '<img onclick="" src="img/profile/'.$pfiles.'">';
        }
    ?>
</div>

我已经在.data()上尝试过同样的技巧，但它每次点击都会保持console.log（甚至是true！），而且它对多重XHR加载无效。。。（在服务器上，它没有.data()开关！）

页面中的Javascript代码在页面加载时进行解析和运行，并在页面处于活动状态时保留在浏览器的内存中。当用户与页面交互时，代码可能安装的任何事件处理程序都会在这些事件发生时按需调用。

一旦安装了.click()处理程序，它就会在该DOM元素的生存期内保持不变，或者直到删除单击处理程序为止。在你删除它之前，每次点击项目时都会调用点击处理程序。

您应该只为给定的函数安装一次.click()处理程序。如果您多次安装它，则在单击该项目时会多次调用它。如果每次单击它时，您的单击处理程序被调用的次数越来越多，那么您的代码显然每次单击它都会安装另一个单击处理程序，您需要修改代码才能不这样做。

为了提供更具体的帮助，我们需要知道您遇到问题的点击处理程序，并且可能需要查看一些相关的HTML。

您可以通过为.big img只设置一个常量事件处理程序而不是不断创建一个新的事件处理程序来简化事件处理代码。您可以通过以下委托事件处理来做到这一点：

$(".big").on("click", "img", function() {
    $(".big").fadeOut(400, function() {
        $('.pfiles').fadeIn(400);
        $('body').scrollTop(scroll);
        $('.big').empty();
        $('.frame').height($('.incontent').height());
    }); 
});

把这个代码放在问题中的任何代码之前，这样它就会初始化一次，而且只初始化一次。

这是一个潜在的问题。在你的代码块的一开始，你有这样的：

$('.pfiles').data("installed", false);
if (!$('.pfiles').data("installed")) {

这意味着您将始终执行if块，即使您之前将数据设置为true。您可以删除第一行，因为$('.pfiles').data("installed")的默认值为false。您不需要初始化它。然后，当以后调用它时，它将尊重您稍后在代码中将其设置为true的事实。

相关文章：