jQuery加载未按预期工作 [英] jQuery load doesn't work as I expected

问题描述

$(".content")
        .load("content/intro.html #bt")
        .hide()
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000)
        .load("content/intro.html #ofm")
        .fadeIn(2000)
        .fadeOut(2000)
        .load("content/main.html")
        .fadeIn(800);

我希望jQuery首先加载内容(intro.html #bt等)，但实际上它会加载main.html，然后将执行列表上的其他所有操作.在这种情况下，有3次淡入淡出.什么是解决方法?

解决方案

这可能是违反直觉的，但是当您了解jQuery的工作原理时，这很有道理.

您要调用的所有方法都在同一时间启动.因此，它加载了所有三个html页面，但是您的眼睛只看到了最后一个，然后看到了动画.您需要让jQuery等待每个命令完成，然后再执行下一个.

(您正在做的叫做 chaining ，尽管它是延迟模式进行控制. . jQuery既实现了两者(我相信仅从v1.5开始才推迟)，但是 load() 仅实现回调. /p>

基本上，您是在告诉jQuery加载内容并运行动画，但您不是在 告诉它等待上一个命令完成后再继续.

这是实现所需目标的一种方法.我还没有测试过，但是它展示了原理.

$(".content")
    .load("content/intro.html #bt", function() {
        $(this).hide().fadeIn(2000, function() {
            $(this).fadeOut(2000, function(){
                $(this).load("content/intro.html #ofm", function() {
                    $(this).fadeIn(2000, function() {
                        $(this).fadeOut(2000, function() {
                            $(this).load("content/main.html", function(){
                                $(this).fadeIn(800);
                            });
                        });
                    });
                });
            });
        });
    });

注意每种方法如何具有回调?这样一来，您便知道在继续操作之前，已经完成了先前方法的执行.

注意，此代码远非理想！使用递延模式和许多jQuery Pulse插件.

了解了jQuery为什么采用这种方式后，请查看保罗·爱尔兰(Paul irish)关于如何解决由此造成的丑陋语法的帖子.

您可能还想签出 TameJS ，它向javascript添加了名为await的结构，从而简化了这种操作代码.

$(".content")
        .load("content/intro.html #bt")
        .hide()
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000)
        .load("content/intro.html #ofm")
        .fadeIn(2000)
        .fadeOut(2000)
        .load("content/main.html")
        .fadeIn(800);

I would expect that jQuery first load content (intro.html #bt etc.) but it will actually load main.html and than will do everything other on the list. In this case three times fade in an out. What is workaround?

解决方案

It might be counter-intuitive but makes a lot of sense when you understand how jQuery works.

All the methods you're calling are starting at the same time. So it loads all three html pages but your eyes are only seeing the last one, and then you're seeing the animations kick in. You need to tell jQuery to wait for each command to finish before executing the next one.

(What you are doing is called chaining, and though it's quite useful, it doesn't work like you want it to, and it's not what you need here.)

The flow of execution can be controller by using either callbacks or the deferred pattern. jQuery implements both (deferred only since v1.5 I believe) but load() only implements callbacks.

Basically, you're telling jQuery to load stuff and run animations, but you're not telling it to wait for the previous command to be finished before continuing.

Here's one way of achieving what you want. I haven't tested it but it demonstrates the principle.

$(".content")
    .load("content/intro.html #bt", function() {
        $(this).hide().fadeIn(2000, function() {
            $(this).fadeOut(2000, function(){
                $(this).load("content/intro.html #ofm", function() {
                    $(this).fadeIn(2000, function() {
                        $(this).fadeOut(2000, function() {
                            $(this).load("content/main.html", function(){
                                $(this).fadeIn(800);
                            });
                        });
                    });
                });
            });
        });
    });

Notice how each method has a callback? That way you know that execution of the previous method is finished before you continue.

Note, this code is far from ideal! There are better ways of achieving this pattern with the deferred pattern and one of the many jQuery pulse plugins.

Once you've understood why jQuery works this way, check out Paul irish's post on how to address the ugly syntax this creates.

You might also want check-out TameJS which adds a construct called await to javascript allowing to simplify this kind of code.

这篇关于jQuery加载未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！