На своем веб-сайте я показываю глобальные индексы с использованием 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/

2
user663724 30 Окт 2015 в 10:45

2 ответа

Лучший ответ

Я бы использовал setInterval для запуска функции каждые 15 секунд.

Вы уже отслеживали нажатую / активную вкладку, я просто вытащил переменную 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
1
Kris 1 Ноя 2015 в 08:57

Нет, вам нужно 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)
})()
-1
Rajesh 30 Окт 2015 в 08:31