Question

在我的网站中，我使用YQL显示全局索引。

这很好。

我的问题是我应该仅为所选标签每15秒刷新一次数据（我想我需要使用settimeout）

但是请你告诉我Jquery超时是如何适应的，因为我需要检查哪个li类是活动的并刷新数据。

我的代码的一部分

jQuery(document).ready(function()
{
    var clickedtab = '';
    if (jQuery(".tab-content-1").length > 0)
    {
        //Default Action Product Tab
        //fetchDataForGlobalIndices(tab);
        clickedtab = '#tab-1-1';
        fetchDataForGlobalIndices(clickedtab);
        jQuery(".tab-content-1").hide(); //Hide all content
        jQuery("ul.tabs-1 li:first").addClass("active").show(); //Activate first tab
        jQuery(".tab-content-1:first").show(); //Show first tab content
        //On Click Event Product Tab
        jQuery("ul.tabs-1 li").click(function()
        {
            jQuery("ul.tabs-1 li").removeClass("active"); //Remove any "active" class
            jQuery(this).addClass("active"); //Add "active" class to selected tab
            clickedtab = jQuery(this).find("a").attr("href");
            fetchDataForGlobalIndices(clickedtab);
            jQuery(".tab-content-1").hide(); //Hide all tab content
            var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            jQuery(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
    }
});

能告诉我怎样才能实现这个目标

这是我的小提琴

http://jsfiddle.net/8465fgex/2/

Answer 1

我每隔15秒使用setInterval触发一次功能。

您已经跟踪了点击/活动标签，我只是将activeTab变量拉到更宽的范围，这样我就可以在定时功能中访问它。我还明确选择了第一个选项卡，以便在第一次尝试刷新之前实际设置activeTab变量。

我没有费心去清理不需要的代码，所以我的解决方案会更明显，但在现实世界中，我可能会重构fetchJSONFromYQL接受一个区域名称作为参数来保存一级传递“clickedtab”。我还要将clickedtab重命名为clickedTab以保持一致性。

工作样本：（http://jsfiddle.net/theredhead/zLvh7c2a/1/）

jQuery(document).ready(function() {
    // can be used with clearInterval later...
    var updateIndiceInterval = null;
    // pulled activeTab into broader scope so i can use it inside the interval function
    var activeTab = null;
    var clickedtab = '';

    if (jQuery(".tab-content-1").length > 0) {
        //Default Action Product Tab
        //fetchDataForGlobalIndices(tab);
        clickedtab = '#tab-1-1';
        fetchDataForGlobalIndices(clickedtab);
        jQuery(".tab-content-1").hide(); //Hide all content
        jQuery("ul.tabs-1 li:first").addClass("active").show(); //Activate first tab
        jQuery(".tab-content-1:first").show(); //Show first tab content
        //On Click Event Product Tab
        jQuery("ul.tabs-1 li").click(function() {
            jQuery("ul.tabs-1 li").removeClass("active"); //Remove any "active" class
            jQuery(this).addClass("active"); //Add "active" class to selected tab
            clickedtab = jQuery(this).find("a").attr("href");
            fetchDataForGlobalIndices(clickedtab);
            jQuery(".tab-content-1").hide(); //Hide all tab content
            activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            jQuery(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
    }

    // preselecting the first tab...
    jQuery("ul.tabs-1 li a:first").click();

    // setting the interval
    updateIndiceInterval = window.setInterval(function() {
        console.log('ticking for ' + activeTab);
        fetchDataForGlobalIndices(activeTab);
    }, 1500);
});

var asia_data = [{
    "LastTradePrice": "5384.60",
    "LastTradeTime": "4:41pm",
    "Changeinpoints": "-1.70",
    "symbol_name": "ALL ORDINARIES",
    "ChangeinPercent": "-0.03%"
}]

var europe_data = [{
    "LastTradePrice": "2451.98",
    "LastTradeTime": "10:25am",
    "Changeinpoints": "-15.67",
    "symbol_name": "ATX",
    "ChangeinPercent": "-0.64%"
}];
var america_data = [{
    "LastTradePrice": "47209.3242",
    "LastTradeTime": "5:19pm",
    "Changeinpoints": "-387.2656",
    "symbol_name": "IBOVESPA",
    "ChangeinPercent": "-0.8136%"
}]

    function fetchDataForGlobalIndices(clickedtab) {
        if (clickedtab === '#tab-1-1') {
            fetchJSONFromYQL(clickedtab);
        } else if (clickedtab === '#tab-1-2') {
            fetchJSONFromYQL(clickedtab);
        } else if (clickedtab === '#tab-1-3') {
            fetchJSONFromYQL(clickedtab);
        }
    }

    function fetchJSONFromYQL(clickedtab) {
        var greenorred = '';
        var htmldata = '';
        htmldata += '<thead><th>Name</th><th>Last</th><th>Change</th><th>Updated</th></thead><tbody>';
        var region_name = '';
        if (clickedtab === '#tab-1-1') {
            region_name = 'ASIA';
            globalindicesresponse = asia_data;
        } else if (clickedtab === '#tab-1-2') {
            region_name = 'EUROPE';
            globalindicesresponse = europe_data;
        } else if (clickedtab === '#tab-1-3') {
            region_name = 'AMERICA';
            globalindicesresponse = america_data;
        }
        for (var i = 0; i < globalindicesresponse.length; i++) {
            var LastTradePrice = globalindicesresponse[i].LastTradePrice;
            var LastTradeTime = globalindicesresponse[i].LastTradeTime;
            var Changeinpoints = globalindicesresponse[i].Changeinpoints;
            var symbol_name = globalindicesresponse[i].symbol_name;
            var ChangeinPercent = globalindicesresponse[i].ChangeinPercent;
            if (Changeinpoints < 0) {
                greenorred = 'redclass'; // 
            } else if (Changeinpoints > 0) {
                greenorred = 'greenclass';
            } else if (Changeinpoints == 0) {
                greenorred = '';
            }
            htmldata += '<tr>\
    <td>' + symbol_name + '</td>\
    <td>' + LastTradePrice + '</td>\
<td class="' + greenorred + '">' + Changeinpoints + '(' + ChangeinPercent + ')</td>\
    <td>' + LastTradeTime + '</td>\
    </tr>';
        }
        htmldata += '</tbody>';
        jQuery(clickedtab).html(htmldata);
    } // end of Global Indices fetching

Answer 2

不需要setInterval。

的setTimeout

这将添加一个延迟指定时间并将在此延迟后运行的进程

(function(){
    var timeout = setTimeout(function(){
        document.write("Hello")
    }, 5000);
})()

的setInterval

这将添加一个倒数计时器，并会在时间到期后调用该函数。

(function(){
  var count = 0;
  var interval = setInterval(function(){
    count++;
    console.log(count)
    if(count>10){
      window.clearInterval(interval);
    }
  },1000)
})()

如何使用Settimeout功能？

2 个答案:

的setTimeout

的setInterval