2

次のコードが部分的に機能しています。私は JavaScript の初心者なので、私のアプローチが最善でない場合でも、私を責めないでください。

window.url_var = "status.htm";
window.elem = "#e1";

function menu_item(){
$(window.elem).click(function (event)
{ 
    $("#divTestArea1").load(window.url_var);
});
}

$("#e1").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "demo2.txt";
window.elem = "#e1";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});


$("#e2").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "status.htm";
window.elem = "#e2";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});

$("#e3").click(function (event)
{ 
event.preventDefault(); 
window.url_var = "form.htm";
window.elem = "#e3";
clearInterval(auto_refresh);
$("#divTestArea1").load(window.url_var);
});


jQuery(document).ready(function() {
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);  
});

要素 e1 と e2 をクリックすると、setInterval が期待どおりに機能し、要素 e3 をクリックするとすぐに、要素の再読み込みが停止します。

それが私がこれまで望んでいた行動です。しかし、e1 または e2 get が再度クリックされた場合は、setinterval を再度開始したいと考えています。

最後は、上記のコードで機能していないものです。

正しい方向に向けていただければ幸いです。

元の質問に対するいくつかの回答を見た後、このコードにたどり着きました（皆さんに感謝します）。私の当初の考えを明確にするために、定期的にウェブページのいくつかの項目を更新する必要がありますが、一部のメニューでコンテンツを変更でき、フォームなどの一部のコンテンツは更新しないでください。

window.url_var = "demo2.txt";
var     auto_refresh = null;

function setRefresh() {
    var self = this;
    this.bar = function() {
      if(window.url_var != ""){ 
    $("#divTestArea1").load(window.url_var);
            auto_refresh = setTimeout(function() { self.bar(); }, 5000);
        }
    }
    this.bar();
}

$("#e1").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "demo2.txt";
    setRefresh();
});  


$("#e2").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "status.htm";
    setRefresh();
});  

$("#e3").click(function (event)
{ 
    event.preventDefault(); 
    window.url_var = "form.htm";
    $("#divTestArea1").load(window.url_var);
    window.url_var = "";
});


$(document).ready(function() {
    setRefresh();
});
4

2 に答える 2

1

2つの異なる変数を使用し、必要に応じてすべてをクリアしてみてください。これは、auto_refresh1とauto_refresh2です。setintervalを呼び出すたびに、新しいIDで新しいタイマーが作成されます。auto_refresh変数を上書きしていますが、その前のタイマーは引き続き起動します。

または、setintervalをハッシュオブジェクトに格納し、それらをすべて実行してクリアすることもできます。

于 2012-09-13T02:29:14.920 に答える
0

あなたがここで何をしようとしているのか正確にはわかりません。それにもかかわらず、私はあなたのコードを少し書き直して、いくつかの改善を加えました (そして、setInterval呼び出しに関連するコードの 1 つの明白なバグを修正しました)。

var url_var = "status.htm",
    elem = "#e1",
    $destination = $("#divTestArea1"),
    auto_refresh;

function menu_item() {
    $(elem).bind("click", function (e) {
        $destination.load(url_var);
    });
}

function load() {
    $destination.load(url_var);
}

function set(url, id) {
    url_var = url;
    elem = id;
}

function setRefresh() {
    return setInterval(menu_item, 5000);
}

function handleClick(e) {
    e.preventDefault();
    set(e.data.url, e.data.id);
    load();
    auto_refresh = setRefresh();
}

$("#e1").on("click", {
    url: "demo2.txt",
    id: "#e1"
}, handleClick);

$("#e2").on("click", {
    url: "status.htm",
    id: "#e2"
}, handleClick);

$("#e3").on("click", function (e) {
    e.preventDefault();
    set("form.htm", "#e3");
    clearInterval(auto_refresh);
    load();
});

$(document).ready(function () {
    load();
    auto_refresh = setRefresh();
});

おそらく、これらのsetInterval呼び出しは実際には呼び出しであるべきだsetTimeoutと思いますか? 「クリック」イベント ハンドラを何度もバインドする必要があるのはなぜですか。

編集 #1:onメソッドからjQuery の現在優先されるメソッドに切り替えbind、イベント データ パラメーターを使用して、イベント処理コードをさらに抽象化しました。

于 2012-09-13T16:04:22.450 に答える